/* Railnotes design tokens — DESIGN_SPEC §2. Single source of truth.
 * Never hardcode a raw value in a component; reference a token here. */

:root {
  /* ---- 2.1 Colour palette ---- */

  /* Ink & surface */
  --color-ink:            #1e1e1e;  /* near-black: card borders, chips, body text on white */
  --color-ink-soft:       #3a3a3a;  /* secondary text */
  --color-ink-mute:       #6b7280;  /* captions, POI labels, collapsed helper text */
  --color-surface:        #ffffff;  /* card & modal background */
  --color-surface-sunk:   #f4f6f8;  /* app background behind cards, inner modal button fill */
  --color-hairline:       #d7dbe0;  /* 1px inner borders: table cells, inner rows */
  --color-hairline-soft:  #e6e9ed;  /* faintest dividers */

  /* GREEN — step-free / proceed / "good" car */
  --color-green-fill:     #d9f2dd;
  --color-green-border:   #46a05a;
  --color-green-text:     #2e7d32;
  --color-green-solid:    #4e9e5f;  /* signal green dot, dispatch green car */

  /* AMBER / ORANGE — partial / caution / platform-length */
  --color-amber-fill:     #fce7c0;
  --color-amber-border:   #e2a13c;
  --color-amber-text:     #b9741a;
  --color-amber-solid:    #e0a63a;  /* dispatch amber car */

  /* RED — restriction / warning / "stop" */
  --color-red-fill:       #f9d9d9;
  --color-red-border:     #db3c3c;
  --color-red-text:       #c62828;
  --color-red-solid:      #d9573f;  /* dispatch red car */
  --color-signal-red:     #d5423b;  /* signal red dot */

  /* BLUE — contact actions only */
  --color-blue-fill:      #cfe4fb;
  --color-blue-border:    #3b82f6;
  --color-blue-text:      #2563eb;

  /* PURPLE — codes actions only */
  --color-purple-fill:    #e9d5ff;
  --color-purple-border:  #a855f7;
  --color-purple-text:    #7e22ce;

  /* TEAL — connections actions only */
  --color-teal-fill:      #cceeee;
  --color-teal-border:    #14919b;
  --color-teal-text:      #0f6b6b;

  /* CHIP — signal aspects, route-indicator symbols, RA chip */
  --color-chip-bg:        #1e1e1e;  /* near-black */
  --color-chip-text:      #ffffff;

  /* Dispatch platform underbar */
  --color-platform-bar:   #8a9199;  /* grey platform-length bar */
  --color-platform-edge:  #d8b23a;  /* thin gold top-stripe on the underbar */
  --color-car-border:     #2b2b2b;  /* dispatch car box border */

  /* Focus / interaction */
  --color-focus-ring:     #2563eb;  /* 3px outline for keyboard focus */

  /* Feedback / flash */
  --color-flash-info-fill:   var(--color-blue-fill);
  --color-flash-info-text:   var(--color-blue-text);
  --color-flash-ok-fill:     var(--color-green-fill);
  --color-flash-ok-text:     var(--color-green-text);
  --color-flash-warn-fill:   var(--color-amber-fill);
  --color-flash-warn-text:   var(--color-amber-text);
  --color-flash-error-fill:  var(--color-red-fill);
  --color-flash-error-text:  var(--color-red-text);

  /* ---- 2.2 Typography ---- */
  --font-sans: "Nunito", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "Roboto Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --fs-station-name: 2rem;      /* 32px / 800 / 1.1 */
  --fs-modal-title:  1.75rem;   /* 28px / 800 / 1.15 */
  --fs-display:      1.25rem;   /* 20px / 900 / 1.15 — distinctive heavy heading */
  --fs-heading:      1.125rem;  /* 18px / 800 / 1.2 */
  --fs-body:         1rem;      /* 16px / 400 / 1.45 */
  --fs-body-strong:  1rem;      /* 16px / 700 / 1.45 */
  --fs-small:        0.875rem;  /* 14px / 400 / 1.4 */
  --fs-caption:      0.8125rem; /* 13px / 600 / 1.3 */
  --fs-mono-code:    1rem;      /* 16px / 700 / 1 */
  --fs-mono-label:   0.875rem;  /* 14px / 500 / 1 — uppercase, tracked */

  /* ---- 2.3 Spacing scale (4px base) ---- */
  --space-1: 4px;   --space-2: 8px;   --space-3: 12px;  --space-4: 16px;
  --space-5: 20px;  --space-6: 24px;  --space-8: 32px;  --space-10: 40px;  --space-12: 48px;

  /* ---- 2.4 Radii ---- */
  --radius-card:    16px;
  --radius-modal:   20px;
  --radius-pill:    999px;
  --radius-chip:    8px;
  --radius-signal:  12px;
  --radius-cell:    8px;
  --radius-node:    999px;

  /* ---- 2.5 Borders, shadows, sizing ---- */
  --border-card:   2px solid var(--color-ink);
  --border-inner:  1px solid var(--color-hairline);
  --border-status: 2px solid;

  --shadow-none:  none;
  --shadow-modal: 0 12px 40px rgba(30, 30, 30, 0.28);
  --backdrop:     rgba(30, 30, 30, 0.55);

  --tap-min:       44px;
  --border-w-card: 2px;

  /* ---- 2.6 Layout & breakpoints ---- */
  --content-max: 680px;
  --page-pad-x:  16px;
  --header-h:    60px;
}