/*
 * Design tokens. Components read these custom properties only; they never
 * hard-code colours, radii, spacing, type sizes or durations.
 *
 * Themes: night (graphite, the approved "Calm" sketch) and day (light, cool
 * neutrals). The theme is set on <html data-theme="day|night"> by
 * src/ui/theme.js. Every text token reaches at least 4.5:1 on every surface
 * it is used on; dev/components.html measures and lists the ratios.
 *
 * Elevation is expressed by surface lightness, not by borders: surface-0 is
 * the page, surface-1 cards and sheets, surface-2 controls and tiles inside
 * cards, surface-3 pressed states, tracks and the topmost fills.
 */
@layer tokens, base, layout, components, pages;

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../../assets/fonts/InterVariable.woff2") format("woff2");
}

@layer tokens {
  :root {
    /* Typeface */
    --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans",
      "Helvetica Neue", "Liberation Sans", "DejaVu Sans", Arial, sans-serif;

    /* Spacing: 4 px grid */
    --space-0: 0;
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-7: 28px;
    --space-8: 32px;
    --space-10: 40px;
    --space-12: 48px;
    --space-16: 64px;

    /* Radius scale and semantic aliases */
    --radius-xs: 4px;
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 14px;
    --radius-xl: 16px;
    --radius-2xl: 20px;
    --radius-3xl: 24px;
    --radius-full: 999px;
    --radius-card: var(--radius-2xl);
    --radius-control: var(--radius-lg);
    --radius-tile: var(--radius-xl);
    --radius-row: var(--radius-md);
    --radius-sheet: var(--radius-3xl);

    /*
     * Type scale. Tracking is size-specific: small text opens up slightly,
     * large text tightens. Line height shrinks relative to size as text grows.
     */
    --type-caption-size: 13px;
    --type-caption-line: 18px;
    --type-caption-tracking: 0.01em;
    --type-body-size: 15px;
    --type-body-line: 20px;
    --type-body-tracking: 0.005em;
    --type-headline-size: 17px;
    --type-headline-line: 22px;
    --type-headline-tracking: -0.006em;
    --type-title3-size: 20px;
    --type-title3-line: 26px;
    --type-title3-tracking: -0.012em;
    --type-title2-size: 24px;
    --type-title2-line: 30px;
    --type-title2-tracking: -0.016em;
    --type-title1-size: 34px;
    --type-title1-line: 40px;
    --type-title1-tracking: -0.024em;
    --type-display-s-size: 32px;
    --type-display-s-line: 38px;
    --type-display-s-tracking: -0.022em;
    --type-display-m-size: 44px;
    --type-display-m-line: 50px;
    --type-display-m-tracking: -0.03em;
    --type-display-l-size: 56px;
    --type-display-l-line: 56px;
    --type-display-l-tracking: -0.035em;

    --weight-light: 300;
    --weight-regular: 400;
    --weight-medium: 500;
    --weight-semibold: 600;

    /* Motion. Springs (src/ui/motion/spring.js) have no duration; these are
       for the few CSS transitions that remain. */
    --duration-press: 100ms;
    --duration-fast: 150ms;
    --duration-base: 200ms;
    --duration-slow: 300ms;
    --duration-reduced: 180ms;
    --duration-theme: 600ms;
    --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
    --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
    --press-scale: 0.97;

    /* Shell geometry */
    --header-height: 56px;
    /* "Einstellungen" (85 px at 13 px) stays clear of the alarm frame's 5 px edge (review 2026-10-09). */
    --rail-width: 100px;
    --tabbar-height: 64px;
    --sheet-max-width: 640px;
    --touch-min: 44px;
    --control-height: 48px;
    --control-height-lg: 56px;

    /* Page backgrounds of both themes, independent of the active theme.
       The theme cross-fade (src/ui/theme.js) dips to the target colour. */
    --page-night: #0b0c0e;
    --page-day: #eef1f4;
    /* The display sleep's black screen (ui/shell/sleep-screen.js): black in both themes, like the backlight off. */
    --sleep-screen: #000;
    /* The red frame of an open alarm (ui/shell/alarm-frame.js): a thin edge, its glow fades this far inward. */
    --alarm-edge-width: 5px;
    --alarm-glow-blur: 36px;

    /* Layers */
    --z-content: 1;
    --z-nav: 15;
    --z-scrim: 40;
    --z-sheet: 41;
    --z-keyboard: 45;
    --z-header: 50;
    --z-toast: 60;
    --z-alarm: 80;
    --z-theme-fade: 90;
    --z-sleep: 100;
  }

  :root[data-device="kiosk"] {
    --touch-min: 48px;
  }

  /* ------------------------------------------------------------------
     Night: graphite surfaces, one water-blue accent
     ------------------------------------------------------------------ */
  :root,
  :root[data-theme="night"] {
    color-scheme: dark;

    --surface-0: var(--page-night);
    --surface-1: #15171a;
    --surface-2: #1f2226;
    --surface-3: #2a2e33;
    --surface-elevated: #2a2e33;
    --surface-warning: #211d16;
    --surface-warning-strong: #2e281d;
    --surface-warning-hover: #3a3224;

    --text-primary: #eceef1;
    --text-secondary: #afb5bd;
    --text-tertiary: #959ca6;
    --text-inverse: #0b0c0e;

    --accent: #6db5f2;
    --accent-hover: #82c0f5;
    --selection: color-mix(in srgb, var(--accent) 30%, transparent);
    --on-accent: #05111d;

    --success: #68ca9d;
    --warning: #ecb862;
    --danger: #f27d74;
    --danger-hover: #f5928a;
    --on-danger: #1d0806;
    --on-warning: #1d1405;
    --info: #8fc1f1;
    --on-info: #05111d;

    /* Stop in the header (Stephan 2026-10-06, F4): red with white text,
       at least 4.5:1 in both themes (tests/theme-tokens.test.js). */
    --stop-fill: #c8302a;
    --stop-fill-pressed: #a8231e;
    --on-stop: #ffffff;

    /* The alarm frame (Stephan 2026-10-09): the Stop's red, not the light --danger, so it does not glare on
       the dark kiosk at night; the glow about a third of it (tests/theme-tokens.test.js). */
    --alarm-edge: var(--stop-fill);
    --alarm-glow: color-mix(in srgb, var(--stop-fill) 34%, transparent);

    /* Toasts by kind (F1): done and info, warning, error. */
    --toast-info: #1d3146;
    --toast-warning: #42361e;
    --toast-error: #4a2320;

    --water: #215a8e;
    --water-use: #3a78b0;
    --water-edge: #93c9f6;
    --water-reserve: #173b5e;

    /* A zone's kind (T6): the plant in a calm square, the watering mark with a fine ring.
       Ink at least 3:1 on its fill (tests/theme-tokens.test.js). */
    --kind-fill: var(--surface-2);
    --kind-ink: var(--text-secondary);
    --kind-mark-ring: #3a3f46;
    --kind-mark-ink: var(--text-secondary);

    --hairline: rgba(255, 255, 255, 0.07);
    --border-strong: transparent;
    --grabber: #4a5058;
    --fill-hover: var(--surface-3);
    --fill-thumb: var(--surface-3);
    --switch-track-off: #3a3f46;
    --switch-thumb: #eceef1;
    --focus-ring: var(--accent);

    /* On-screen keyboard: the board, letter keys, special keys */
    --keyboard-bg: #1f2226;
    --key-fill: #33373d;
    --key-special: #26292e;

    --scrim: #000;
    --scrim-opacity: 0.62;

    --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-2: 0 10px 30px rgba(0, 0, 0, 0.45);
    --shadow-3: 0 18px 48px rgba(0, 0, 0, 0.55);
    --shadow-sheet: 0 -12px 40px rgba(0, 0, 0, 0.5);
    --shadow-thumb: none;
    --card-edge: none;
  }

  /* ------------------------------------------------------------------
     Day: light, calm, slightly cool neutrals; accent darkened for contrast
     ------------------------------------------------------------------ */
  :root[data-theme="day"] {
    color-scheme: light;

    --surface-0: var(--page-day);
    --surface-1: #ffffff;
    --surface-2: #e7eaee;
    --surface-3: #d9dee4;
    --surface-elevated: #ffffff;
    --surface-warning: #fbf3e3;
    --surface-warning-strong: #f2e4c6;
    --surface-warning-hover: #eadab4;

    --text-primary: #14181d;
    --text-secondary: #454d57;
    --text-tertiary: #57606b;
    --text-inverse: #ffffff;

    --accent: #0b62a6;
    --accent-hover: #0a5694;
    --selection: color-mix(in srgb, var(--accent) 30%, transparent);
    --on-accent: #ffffff;

    --success: #176a40;
    --warning: #8a5300;
    --danger: #b42318;
    --danger-hover: #9c1e14;
    --on-danger: #ffffff;
    --on-warning: #ffffff;
    --info: #1f5b94;
    --on-info: #ffffff;

    --stop-fill: #b42318;
    --stop-fill-pressed: #9c1e14;
    --on-stop: #ffffff;

    --alarm-edge: var(--stop-fill);
    --alarm-glow: color-mix(in srgb, var(--stop-fill) 30%, transparent);

    --toast-info: #dceaf7;
    --toast-warning: #f8e9c8;
    --toast-error: #f9dedb;

    --water: #a9cfee;
    --water-use: #6fa9dc;
    --water-edge: #0b62a6;
    --water-reserve: #d3e5f5;

    --kind-fill: var(--surface-2);
    --kind-ink: var(--text-secondary);
    --kind-mark-ring: #c3cad3;
    --kind-mark-ink: var(--text-secondary);

    --hairline: rgba(16, 24, 40, 0.1);
    --border-strong: transparent;
    --grabber: #b3bac3;
    --fill-hover: var(--surface-3);
    --fill-thumb: #ffffff;
    --switch-track-off: #cdd3db;
    --switch-thumb: #ffffff;
    --focus-ring: var(--accent);

    --keyboard-bg: #d9dee4;
    --key-fill: #ffffff;
    --key-special: #c3cad3;

    --scrim: #000;
    --scrim-opacity: 0.32;

    --shadow-1: 0 1px 2px rgba(16, 24, 40, 0.08);
    --shadow-2: 0 8px 24px rgba(16, 24, 40, 0.12);
    --shadow-3: 0 16px 40px rgba(16, 24, 40, 0.16);
    --shadow-sheet: 0 -8px 32px rgba(16, 24, 40, 0.14);
    --shadow-thumb: 0 1px 3px rgba(16, 24, 40, 0.18);
    --card-edge: 0 0 0 1px rgba(16, 24, 40, 0.04), 0 1px 2px rgba(16, 24, 40, 0.05);
  }

  /* More contrast: stronger secondary text, visible borders on surfaces. */
  @media (prefers-contrast: more) {
    :root,
    :root[data-theme="night"] {
      --text-secondary: #ccd1d7;
      --text-tertiary: #b9bfc7;
      --hairline: rgba(255, 255, 255, 0.32);
      --border-strong: rgba(255, 255, 255, 0.5);
      --grabber: #9aa1aa;
      --switch-track-off: #5a616a;
    }

    :root[data-theme="day"] {
      --text-secondary: #2f353d;
      --text-tertiary: #3c434c;
      --hairline: rgba(16, 24, 40, 0.36);
      --border-strong: rgba(16, 24, 40, 0.55);
      --grabber: #6b737d;
      --switch-track-off: #9aa2ad;
    }
  }
}