/* ============================================================
   TransportSeek design tokens
   The SCS signage system (Vignelli's subway signage: Helvetica, black sign
   bars with white type, coloured route bullets on aged paper, square
   corners, hard offset shadows, hairline rules) carried over to a transport
   app. docs/DESIGN.md explains every group; change a value here and nowhere
   else.

   Themes: light is the default. Dark applies when the device prefers it and
   the reader has not picked light (html[data-theme="light"]), or when the
   reader picked dark (html[data-theme="dark"]). The boot script in
   index.html sets data-theme only for an explicit choice, so the page
   follows the system with no script at all.
   ============================================================ */

:root {
  color-scheme: light;

  /* ---- paper and ink ---- */
  --page-bg: #f2efe8;
  --card-bg: #fcfbf7;
  --surface: #fcfbf7;
  --surface-2: #ebe7de;           /* pressed / hovered rows: the page one shade down */
  --text: #111111;
  --muted: #62615c;               /* 5.4:1 on the paper */
  --border: #d9d5c9;
  --border-strong: #8e8a7e;       /* 3:1, the line a control is drawn with */

  /* ---- action green (SCS): the colour of an action and of "on time" ---- */
  --accent: #00933c;
  --accent-dark: #00752f;
  --accent-solid: #00933c;
  --accent-soft: #e8f2e8;
  --accent-soft-border: #b5d6bc;
  --on-accent: #ffffff;

  /* ---- notices ---- */
  --notice-bg: #fdf6e0;
  --notice-border: #e5cd8a;
  --danger-bg: #fdf0ef;
  --danger-border: #eeb4ae;
  --danger-solid: #d4211c;
  --on-danger: #ffffff;

  /* ---- status inks: words on the paper, all 4.5:1 or better ---- */
  --ok-ink: #00752f;              /* On time */
  --late-ink: #c21f19;            /* 3 min late, cancelled */
  --early-ink: #0039a6;           /* 2 min early */
  --warn-ink: #7a5e00;            /* minor delays, few seats */
  --info-ink: #0039a6;
  --alert-ink: #c21f19;           /* SCS alert red, deepened to 4.5:1 for small type */
  /* the same meanings on a black sign, which is black in both themes */
  --alert-sign: #ff6b60;
  --ok-sign: #3cc073;
  --warn-sign: #fccc0a;

  /* ---- occupancy scale (bars, never words alone) ---- */
  --occ-empty: #3cc073;
  --occ-many: #3cc073;
  --occ-few: #f2b600;
  --occ-standing: #ff7a1a;
  --occ-full: #e0301e;
  --occ-none: #bdb8ab;

  /* ---- signage: the black objects keep their ink in both themes ---- */
  --sign-bg: #131313;
  --sign-ink: #ffffff;
  --sign-muted: rgba(255, 255, 255, 0.72);
  --sign-rule: rgba(255, 255, 255, 0.22);
  /* the edge a black object keeps where the page is nearly black too */
  --sign-edge: transparent;

  /* ---- chrome: top bar, tab bar, nav. Follows the theme, a shade off the page ---- */
  --bar-bg: var(--surface);
  --bar-ink: var(--text);
  --bar-muted: var(--muted);
  --bar-edge: #cdc8ba;

  /* ---- TfNSW mode colours (mode letter bullets) ---- */
  --mode-train: #f6891f;
  --mode-metro: #168388;
  --mode-lightrail: #e4022d;
  --mode-bus: #00b5ef;
  --mode-ferry: #5ab031;
  --mode-coach: #732a82;
  --mode-schoolbus: #fdb714;
  --mode-ondemand: #6d6e71;
  --mode-walk: #6d6e71;
  --mode-other: #6d6e71;

  /* ---- the five sections, one hue each (a colour means one thing) ----
     Home trains orange, Search buses blue, Plan metro teal, Status light
     rail red, History coach purple. The *-ink variants are the same hues
     taken dark enough to hold 3:1 as a glyph on the light bar. */
  --route-home: var(--mode-train);
  --route-search: var(--mode-bus);
  --route-plan: var(--mode-metro);
  --route-status: var(--mode-lightrail);
  --route-history: var(--mode-coach);
  --route-home-ink: #b35d00;
  --route-search-ink: #00739a;
  --route-plan-ink: #168388;
  --route-status-ink: #d10228;
  --route-history-ink: #732a82;

  /* ---- the MTA route palette, for rules and marks that are not modes ---- */
  --line-red: #ee352e;
  --line-orange: #ff6319;
  --line-yellow: #fccc0a;
  --line-green: #00933c;
  --line-blue: #0039a6;
  --line-grey: #a7a9ac;

  /* ---- map ---- */
  --map-bg: #f2efe8;
  --map-me: #1a73e8;              /* the blue dot, as every map draws it */

  /* ---- shape ---- */
  --radius: 2px;                  /* square corners: 2px is a cut edge, not a round */
  --shadow: 3px 3px 0 rgba(17, 17, 17, 0.14);
  --shadow-hover: 3px 3px 0 rgba(17, 17, 17, 0.28);
  --sheet-shadow: 0 -1px 0 var(--bar-edge);
  --focus: 2px solid var(--accent);

  /* ---- type ----
     The signage face, and a mono for codes (run numbers, car numbers). */
  --font: "Helvetica Neue", Helvetica, Arial, "Liberation Sans", sans-serif;
  --mono: "Roboto Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* The type ladder: six stops with real distance between them and nothing
     between the stops. A signage system has a handful of sizes that each
     mean something. */
  --t-display: clamp(2.05rem, 5.4vw, 4.2rem);
  --t-head: clamp(1.5rem, 3.1vw, 2.1rem);
  --t-lede: clamp(1.06rem, 1.5vw, 1.22rem);
  --t-body: 1rem;
  --t-small: 0.88rem;
  --t-micro: 0.72rem;

  /* ---- space ---- */
  --gutter: 20px;                 /* panel and page side gutter */
  --after-title: 24px;            /* one gap under a page's name, everywhere */
  --row-pad: 12px;                /* vertical padding of a list row */
  --panel-w: clamp(360px, 32vw, 440px);
  --nav-h: 60px;                  /* desktop nav (measured by app.js) */
  --appbar-h: 52px;               /* app top bar, without the safe area */
  --tabbar-h: 58px;               /* app tab bar, without the safe area (measured) */

  /* ---- the SCS five-route stripe, for the mark and the splash ---- */
  --stripe: linear-gradient(to bottom,
    var(--mode-train) 0 2px, var(--mode-metro) 2px 4px,
    var(--mode-lightrail) 4px 6px, var(--mode-bus) 6px 8px,
    var(--mode-ferry) 8px 10px);

  /* ---- z layers ---- */
  --z-map: 1;
  --z-content: 10;
  --z-map-ctrl: 20;
  --z-sheet: 30;
  --z-chrome: 1100;
  --z-menu: 1250;
  --z-dialog: 1400;
  --z-toast: 1500;
}

/* ---------------- Dark ----------------
   Written twice on purpose: once for the device preference (with no reader
   choice or a dark one) and once for the explicit choice. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --page-bg: #121212;
    --card-bg: #1b1b19;
    --surface: #1b1b19;
    --surface-2: #242421;
    --text: #f0eee7;
    --muted: #a5a39a;
    --border: #34332e;
    --border-strong: #6a675e;
    --accent: #2fb063;
    --accent-dark: #55c581;
    --accent-solid: #00933c;
    --accent-soft: #142a1b;
    --accent-soft-border: #26513a;
    --on-accent: #ffffff;
    --notice-bg: #272113;
    --notice-border: #574a28;
    --danger-bg: #2a1716;
    --danger-border: #5b302d;
    --ok-ink: #3cc073;
    --late-ink: #ff6b60;
    --early-ink: #6ea8ff;
    --warn-ink: #fccc0a;
    --info-ink: #6ea8ff;
    --alert-ink: #ff6b60;
    --occ-none: #4c4a43;
    --shadow: 3px 3px 0 rgba(0, 0, 0, 0.5);
    --shadow-hover: 3px 3px 0 rgba(47, 176, 99, 0.3);
    --sign-bg: #0c0c0c;
    --sign-edge: rgba(255, 255, 255, 0.2);
    --bar-edge: #3c3b35;
    --route-home-ink: var(--mode-train);
    --route-search-ink: var(--mode-bus);
    --route-plan-ink: #1fa3a9;
    --route-status-ink: #ff5a6e;
    --route-history-ink: #b77bc4;
    --map-bg: #151514;
    --map-me: #4d9cff;
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --page-bg: #121212;
  --card-bg: #1b1b19;
  --surface: #1b1b19;
  --surface-2: #242421;
  --text: #f0eee7;
  --muted: #a5a39a;
  --border: #34332e;
  --border-strong: #6a675e;
  --accent: #2fb063;
  --accent-dark: #55c581;
  --accent-solid: #00933c;
  --accent-soft: #142a1b;
  --accent-soft-border: #26513a;
  --on-accent: #ffffff;
  --notice-bg: #272113;
  --notice-border: #574a28;
  --danger-bg: #2a1716;
  --danger-border: #5b302d;
  --ok-ink: #3cc073;
  --late-ink: #ff6b60;
  --early-ink: #6ea8ff;
  --warn-ink: #fccc0a;
  --info-ink: #6ea8ff;
  --alert-ink: #ff6b60;
  --occ-none: #4c4a43;
  --shadow: 3px 3px 0 rgba(0, 0, 0, 0.5);
  --shadow-hover: 3px 3px 0 rgba(47, 176, 99, 0.3);
  --sign-bg: #0c0c0c;
  --sign-edge: rgba(255, 255, 255, 0.2);
  --bar-edge: #3c3b35;
  --route-home-ink: var(--mode-train);
  --route-search-ink: var(--mode-bus);
  --route-plan-ink: #1fa3a9;
  --route-status-ink: #ff5a6e;
  --route-history-ink: #b77bc4;
  --map-bg: #151514;
  --map-me: #4d9cff;
}

/* ---------------- Motion tokens (transitions.dev scale) ----------------
   One timing vocabulary for the small transitions: menus, icon swaps,
   toasts, status lines, digits, list entries. The sheet has its own tuned
   physics (sheet.js) and stays out of this. */
:root {
  --duration-stagger: 40ms;
  --duration-micro: 80ms;
  --duration-quick: 150ms;
  --duration-fast: 250ms;
  --duration-medium: 350ms;
  --duration-slow: 400ms;
  --duration-very-slow: 500ms;
  --ease-smooth-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: ease-in-out;
  --ease-bounce: cubic-bezier(0.34, 1.36, 0.64, 1);
  --distance-micro: 4px;
  --distance-small: 6px;
  --distance-base: 8px;
  --distance-medium: 12px;
  --blur-small: 2px;
  --blur-medium: 3px;
  /* icon swap (gear, theme, pin) */
  --icon-swap-dur: var(--duration-fast);
  --icon-swap-blur: var(--blur-small);
  --icon-swap-ease: var(--ease-in-out);
  /* number pop-in (countdowns) */
  --digit-dur: var(--duration-very-slow);
  --digit-distance: var(--distance-base);
  --digit-blur: var(--blur-small);
  --digit-ease: cubic-bezier(0.34, 1.45, 0.64, 1);
  /* dropdown (settings menu, layers menu) */
  --dropdown-open-dur: var(--duration-fast);
  --dropdown-close-dur: var(--duration-quick);
  --dropdown-pre-scale: 0.97;
  --dropdown-closing-scale: 0.99;
  /* toast: drops in from under the top bar */
  --toast-open: var(--duration-medium);
  --toast-close: var(--duration-fast);
  --toast-distance: 18px;
  --toast-blur: var(--blur-small);
  --toast-scale: 0.97;
  /* text swap (status lines, "updated" tickers) */
  --text-swap-dur: var(--duration-quick);
  --text-swap-translate-y: var(--distance-micro);
  --text-swap-blur: var(--blur-small);
  /* error shake */
  --shake-distance: var(--distance-small);
  --shake-overshoot: 4px;
  --shake-dur-a: 80ms;
  --shake-dur-b: 60ms;
  /* skeleton */
  --pulse-dur: 1000ms;
  --pulse-min: 0.5;
  /* chrome */
  --chrome-fade: 500ms cubic-bezier(0.16, 1, 0.3, 1);
  --chrome-slide: 450ms cubic-bezier(0.16, 1, 0.3, 1);
}