/* ============================================================================
   map-admin design tokens  (/red-actual, /merida)
   ----------------------------------------------------------------------------
   Semantic CSS custom properties for the transit-map UI chrome. The defaults
   below reproduce the CURRENT look exactly — introducing this layer is a
   visual no-op. Components in index.html (inline <style>) and map-admin.css
   reference these via var(--ds-*).

   TO SWITCH THEMES: set data-theme="<name>" on <body> (the views render it
   from their `theme` context value). Each theme is a [data-theme="<name>"]
   block below that overrides only the tokens that differ.

   TO ADD A THEME: copy the [data-theme="dark"] example, rename it, and set the
   handful of tokens you want to change. No component CSS edits are needed.

   OUT OF SCOPE (kept as literals, not tokens): per-transit-line brand colors
   (.station-marker.*), Mapbox GL paint colors, inline-SVG icon strokes,
   SVG-filter icon recoloring, and JS-injected --line-color / --story-accent.
   ============================================================================ */

:root {
  /* ---- Surfaces ---------------------------------------------------------- */
  --ds-bg:               #f8f9fa;            /* page/navbar chrome background   */
  --ds-surface:          #ffffff;            /* panels, cards, sheets, menus    */
  --ds-surface-raised:   #f3f4f6;            /* icon fills, chips, tabs         */
  --ds-surface-muted:    #f5f5f5;            /* inputs, panel sections          */
  --ds-overlay:          rgba(0, 0, 0, 0.5); /* full-screen modal scrim         */
  --ds-scrim:            rgba(0, 0, 0, 0.2); /* bottom-sheet dim                */

  /* ---- Text ------------------------------------------------------------- */
  --ds-text:             #111827;            /* primary ink                     */
  --ds-text-muted:       #6b7280;            /* secondary                       */
  --ds-text-subtle:      #9ca3af;            /* tertiary / placeholders / chevrons */
  --ds-text-inverse:     #ffffff;            /* text on colored fills           */

  /* ---- Borders ---------------------------------------------------------- */
  --ds-border:           #e5e7eb;            /* hairline dividers / card edges  */
  --ds-border-strong:    #d9dee5;            /* control outlines                */
  --ds-border-strong-hover: #bfc6cf;
  --ds-handle:           #d1d5db;            /* drag handle                     */
  /* Frame around floating panels / sheets / close bars. Default = bold brand
     accent frame; themes can soften it to a clean hairline. */
  --ds-frame-border:     2px solid var(--ds-primary);
  --ds-border-soft:      rgba(17, 24, 39, 0.06);   /* faint hairline on cards   */

  /* ---- Brand / primary -------------------------------------------------- */
  --ds-primary:          #f26b1d;
  --ds-primary-contrast: #ffffff;            /* on-primary text/icon            */
  --ds-primary-tint:     #fff7f0;            /* hover wash surface              */
  --ds-primary-tint-12:  rgba(242, 107, 29, 0.12);
  --ds-primary-tint-22:  rgba(242, 107, 29, 0.22);
  --ds-primary-border-25: rgba(242, 107, 29, 0.25);

  /* ---- Status ----------------------------------------------------------- */
  --ds-success:          #22c55e;
  --ds-success-strong:   #4caf50;            /* legacy upload/toggle green      */
  --ds-success-strong-hover: #45a049;
  --ds-danger:           #dc3545;
  --ds-warning:          #f59e0b;
  --ds-warning-bg:       #fff7ed;            /* disruption card                 */
  --ds-warning-border:   #fed7aa;
  --ds-warning-text:     #9a3412;
  --ds-badge-bg:         #fcd34d;            /* beta badge                      */
  --ds-info:             #3b82f6;
  --ds-info-bg:          #eef4ff;
  --ds-focus:            rgba(59, 130, 246, 0.3);

  /* ---- Elevation (drop shadows by tier; tint-normalized to black) ------- */
  --ds-shadow-xs:            0 1px 2px rgba(0, 0, 0, 0.05);
  --ds-shadow-sm:            0 2px 4px rgba(0, 0, 0, 0.2);
  --ds-shadow-sm-strong:     0 2px 8px rgba(0, 0, 0, 0.25);
  --ds-shadow-raised:        0 4px 10px rgba(0, 0, 0, 0.12);
  --ds-shadow-card:          0 6px 14px rgba(0, 0, 0, 0.08);
  --ds-shadow-md:            0 8px 16px rgba(0, 0, 0, 0.08);
  --ds-shadow-panel:         0 4px 16px rgba(0, 0, 0, 0.3);
  --ds-shadow-floating:      0 10px 24px rgba(0, 0, 0, 0.12);
  --ds-shadow-overlay:       0 16px 40px rgba(0, 0, 0, 0.13);
  --ds-shadow-overlay-strong:0 18px 48px rgba(0, 0, 0, 0.2);
  --ds-shadow-lg:            0 20px 50px rgba(0, 0, 0, 0.2);
  --ds-shadow-primary:       0 6px 12px rgba(242, 107, 29, 0.22);  /* brand-tinted */
  --ds-shadow-inset:         inset 0 0 0 1px rgba(0, 0, 0, 0.08);  /* hairline ring */
  --ds-shadow-inset-bottom:  inset 0 -2px 0 rgba(0, 0, 0, 0.1);

  /* ---- Radius (t-shirt scale; common values are pixel-faithful) --------- */
  --ds-radius-xs:        4px;
  --ds-radius-sm:        8px;
  --ds-radius-md:        10px;
  --ds-radius-lg:        12px;
  --ds-radius-xl:        16px;
  --ds-radius-2xl:       20px;
  --ds-radius-3xl:       24px;
  --ds-radius-4xl:       28px;
  --ds-radius-5xl:       35px;
  --ds-radius-pill:      999px;
  --ds-radius-circle:    50%;

  /* ---- Type ------------------------------------------------------------- */
  --ds-font-display:     'Mada', system-ui, -apple-system, sans-serif;
  --ds-font-body:        Arial, sans-serif;

  /* ---- Icon tint -------------------------------------------------------- */
  /* CSS filter that recolors monochrome <img> icons to the brand. Themeable:
     it is the one way an <img src> can follow the active theme. Default = the
     original brand orange recipe. */
  --ds-icon-filter:      brightness(0) saturate(100%) invert(35%) sepia(88%) saturate(5152%) hue-rotate(15deg) brightness(97%) contrast(104%);

  /* Drives native form controls (e.g. the theme <select> popup) light/dark. */
  --ds-color-scheme:     light;

  /* ---- Warm "alt" surface ----------------------------------------------- */
  /* The cream closest-stations search cluster (.closest-search-* / .cb-*).
     Kept as its own group so it stays warm under the default theme; a theme
     can recolor it by overriding these too. */
  --ds-alt-bg:           #f4eedb;
  --ds-alt-surface:      #fbf7ec;
  --ds-alt-raised:       #f0e9d6;
  --ds-alt-border:       #e7dec6;
  --ds-alt-text:         #211d17;
  --ds-alt-text-muted:   #6b6354;
  --ds-alt-text-subtle:  #8a816e;
  --ds-alt-shadow:       rgba(33, 29, 23, 0.22);
}

/* ============================================================================
   IMPORTED THEMES — ported from the mobile app's design system
   (app/app/constants/theme.ts). Six themes across a style x appearance matrix:
     light / dark           — Sky-Orange (the default app look)
     skyline / skyline-dark — Apple-Maps blue
     transit / transit-dark — Citymapper navy + acid-lime
   Each block sets the base roles (mapped from the app's ThemeColors). Derived
   tints/borders/alt-surface are computed once from those bases in the shared
   block; icon tint / scrim / dark shadows come from the light/dark groups.
   Fonts mirror the app's per-theme type pairings (loaded in the template).
   Apply with <body data-theme="..."> (set theme="..." in the view).
   ============================================================================ */

/* ---- base roles per theme (mapped from the app's ThemeColors) ---------- */
[data-theme="light"] {
  --ds-bg: #ffffff; --ds-surface: #ffffff; --ds-surface-raised: #f3f4f6; --ds-surface-muted: #f3f4f6;
  --ds-text: #111827; --ds-text-muted: #4b5563; --ds-text-subtle: #9ca3af; --ds-text-inverse: #ffffff;
  --ds-border: #e5e7eb; --ds-border-strong: #d1d5db;
  --ds-primary: #ff4500; --ds-primary-contrast: #ffffff;
  --ds-success: #22c55e; --ds-danger: #ff4500; --ds-warning: #fcd34d; --ds-info: #1e3a8a;
  --ds-overlay: rgba(0, 0, 0, 0.5);
  --ds-font-display: 'Overpass', system-ui, sans-serif;
  --ds-font-body: 'Libre Franklin', system-ui, sans-serif;
}
[data-theme="dark"] {
  --ds-bg: #0b1220; --ds-surface: #111827; --ds-surface-raised: #1f2937; --ds-surface-muted: #111827;
  --ds-text: #f9fafb; --ds-text-muted: #9ca3af; --ds-text-subtle: #6b7280; --ds-text-inverse: #111827;
  --ds-border: #374151; --ds-border-strong: #4b5563;
  --ds-primary: #ff5c26; --ds-primary-contrast: #ffffff;
  --ds-success: #34d399; --ds-danger: #fb7185; --ds-warning: #fcd34d; --ds-info: #3b82f6;
  --ds-overlay: rgba(0, 0, 0, 0.6);
  --ds-font-display: 'Archivo', system-ui, sans-serif;
  --ds-font-body: 'Inter', system-ui, sans-serif;
}
[data-theme="skyline"] {
  --ds-bg: #e7eff5; --ds-surface: #ffffff; --ds-surface-raised: #eaf1f7; --ds-surface-muted: #dce7f1;
  --ds-text: #0a1622; --ds-text-muted: #5f7080; --ds-text-subtle: #94a4b4; --ds-text-inverse: #ffffff;
  --ds-border: rgba(10, 22, 34, 0.08); --ds-border-strong: rgba(10, 22, 34, 0.14);
  --ds-primary: #3554ff; --ds-primary-contrast: #ffffff;
  --ds-success: #22c55e; --ds-danger: #ff4500; --ds-warning: #fcd34d; --ds-info: #3554ff;
  --ds-overlay: rgba(10, 22, 34, 0.45);
  --ds-font-display: 'Plus Jakarta Sans', system-ui, sans-serif;
  --ds-font-body: 'Sora', system-ui, sans-serif;
}
[data-theme="skyline-dark"] {
  --ds-bg: #0a1622; --ds-surface: #13243a; --ds-surface-raised: #1b3047; --ds-surface-muted: #0f1e2e;
  --ds-text: #eaf1f8; --ds-text-muted: #9db0c2; --ds-text-subtle: #6b7e90; --ds-text-inverse: #0a1622;
  --ds-border: rgba(234, 241, 248, 0.10); --ds-border-strong: rgba(234, 241, 248, 0.18);
  --ds-primary: #5c78ff; --ds-primary-contrast: #ffffff;
  --ds-success: #34d399; --ds-danger: #fb7185; --ds-warning: #fcd34d; --ds-info: #5c78ff;
  --ds-overlay: rgba(3, 8, 14, 0.6);
  --ds-font-display: 'Plus Jakarta Sans', system-ui, sans-serif;
  --ds-font-body: 'Sora', system-ui, sans-serif;
}
[data-theme="transit"] {
  --ds-bg: #ffffff; --ds-surface: #f4f6fa; --ds-surface-raised: #e6ecf5; --ds-surface-muted: #f4f6fa;
  --ds-text: #0b1f3a; --ds-text-muted: #5b6b82; --ds-text-subtle: #9aa6ba; --ds-text-inverse: #ffffff;
  --ds-border: rgba(11, 31, 58, 0.10); --ds-border-strong: rgba(11, 31, 58, 0.20);
  --ds-primary: #00d26a; --ds-primary-contrast: #0b1f3a;
  --ds-success: #00d26a; --ds-danger: #ff4a1c; --ds-warning: #fcd34d; --ds-info: #1b3457;
  --ds-overlay: rgba(11, 31, 58, 0.5);
  --ds-font-display: 'Barlow', system-ui, sans-serif;
  --ds-font-body: 'Public Sans', system-ui, sans-serif;
}
[data-theme="transit-dark"] {
  --ds-bg: #06101f; --ds-surface: #0e2440; --ds-surface-raised: #163055; --ds-surface-muted: #0b1f3a;
  --ds-text: #eaf0f8; --ds-text-muted: #9fb0c7; --ds-text-subtle: #6b7e97; --ds-text-inverse: #0b1f3a;
  --ds-border: rgba(234, 240, 248, 0.10); --ds-border-strong: rgba(234, 240, 248, 0.18);
  --ds-primary: #00d26a; --ds-primary-contrast: #0b1f3a;
  --ds-success: #00d26a; --ds-danger: #ff4a1c; --ds-warning: #fcd34d; --ds-info: #7fa8d9;
  --ds-overlay: rgba(3, 7, 15, 0.6);
  --ds-font-display: 'Barlow', system-ui, sans-serif;
  --ds-font-body: 'Public Sans', system-ui, sans-serif;
}

/* ---- derived tokens — computed from each theme's own base roles -------- */
[data-theme="light"], [data-theme="dark"], [data-theme="skyline"],
[data-theme="skyline-dark"], [data-theme="transit"], [data-theme="transit-dark"] {
  --ds-primary-tint:        color-mix(in srgb, var(--ds-primary) 14%, var(--ds-surface));
  --ds-primary-tint-12:     color-mix(in srgb, var(--ds-primary) 12%, transparent);
  --ds-primary-tint-22:     color-mix(in srgb, var(--ds-primary) 22%, transparent);
  --ds-primary-border-25:   color-mix(in srgb, var(--ds-primary) 25%, transparent);
  --ds-focus:               color-mix(in srgb, var(--ds-info) 35%, transparent);
  --ds-info-bg:             color-mix(in srgb, var(--ds-info) 12%, var(--ds-surface));
  --ds-warning-bg:          color-mix(in srgb, var(--ds-warning) 18%, var(--ds-surface));
  --ds-warning-border:      color-mix(in srgb, var(--ds-warning) 45%, var(--ds-surface));
  --ds-warning-text:        color-mix(in srgb, var(--ds-warning) 38%, var(--ds-text));
  --ds-badge-bg:            var(--ds-warning);
  --ds-border-soft:         color-mix(in srgb, var(--ds-text) 8%, transparent);
  --ds-border-strong-hover: var(--ds-border-strong);
  --ds-handle:              var(--ds-border-strong);
  --ds-frame-border:        1px solid var(--ds-border);
  --ds-shadow-primary:      0 6px 12px color-mix(in srgb, var(--ds-primary) 22%, transparent);
  /* the warm closest-search cluster follows the active theme */
  --ds-alt-bg: var(--ds-bg); --ds-alt-surface: var(--ds-surface); --ds-alt-raised: var(--ds-surface-raised);
  --ds-alt-border: var(--ds-border); --ds-alt-text: var(--ds-text);
  --ds-alt-text-muted: var(--ds-text-muted); --ds-alt-text-subtle: var(--ds-text-subtle);
  --ds-alt-shadow: var(--ds-overlay);
}

/* ---- light-appearance group: neutral icon tint, light scrim ----------- */
[data-theme="light"], [data-theme="skyline"], [data-theme="transit"] {
  --ds-icon-filter: brightness(0) saturate(100%) opacity(0.72);
  --ds-scrim:       rgba(0, 0, 0, 0.2);
}

/* ---- dark-appearance group: light icon tint, deeper scrim + shadows --- */
[data-theme="dark"], [data-theme="skyline-dark"], [data-theme="transit-dark"] {
  --ds-color-scheme: dark;
  --ds-icon-filter: brightness(0) invert(1) opacity(0.85);
  --ds-scrim:       rgba(0, 0, 0, 0.45);
  --ds-shadow-xs:            0 1px 2px rgba(0, 0, 0, 0.4);
  --ds-shadow-sm:            0 2px 4px rgba(0, 0, 0, 0.5);
  --ds-shadow-sm-strong:     0 2px 8px rgba(0, 0, 0, 0.55);
  --ds-shadow-raised:        0 4px 10px rgba(0, 0, 0, 0.5);
  --ds-shadow-card:          0 6px 14px rgba(0, 0, 0, 0.5);
  --ds-shadow-md:            0 8px 16px rgba(0, 0, 0, 0.45);
  --ds-shadow-panel:         0 4px 16px rgba(0, 0, 0, 0.6);
  --ds-shadow-floating:      0 10px 24px rgba(0, 0, 0, 0.55);
  --ds-shadow-overlay:       0 16px 40px rgba(0, 0, 0, 0.6);
  --ds-shadow-overlay-strong:0 18px 48px rgba(0, 0, 0, 0.65);
  --ds-shadow-lg:            0 20px 50px rgba(0, 0, 0, 0.55);
  --ds-shadow-inset:         inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

/* ============================================================================
   THEME: "Web"  —  Direction B · Compact Transit (from Claude Design,
   claude.ai/design "Wikiando Redesign").
   The Wikiando brand applied to the whole UI: warm paper surfaces, near-black
   warm ink text, coral accent, per-mode color badges (data), Mada throughout,
   soft warm shadows. Brand tokens lifted verbatim from the design's shared.jsx
   (cream #F4EEDB / paper #FBF7EC / ink #211D17 / ink2 #6B6354 / line #E7DEC6 /
   coral #E8553A / coralSoft #FBE3DC). Applies identically to /red-actual and
   /merida — themes are global, not per-city.
   ============================================================================ */
[data-theme="web"] {
  /* Surfaces — warm paper */
  --ds-bg:               #f4eedb;            /* cream page / navbar chrome      */
  --ds-surface:          #fbf7ec;            /* paper panels, cards, sheets     */
  --ds-surface-raised:   #f0e9d6;            /* pills, search field, icon fills */
  --ds-surface-muted:    #f0e9d6;            /* inputs, panel sections          */
  --ds-overlay:          rgba(33, 29, 23, 0.5);
  --ds-scrim:            rgba(33, 29, 23, 0.25);

  /* Text — warm ink */
  --ds-text:             #211d17;
  --ds-text-muted:       #6b6354;
  --ds-text-subtle:      #8a816e;
  --ds-text-inverse:     #ffffff;

  /* Borders — hairline on cream */
  --ds-border:           #e7dec6;
  --ds-border-strong:    #d9cdb0;
  --ds-border-strong-hover: #c9bfa6;
  --ds-handle:           #d9cdb0;
  /* Direction B panels are clean paper cards — soft hairline, not a heavy
     accent frame. */
  --ds-frame-border:     1px solid var(--ds-border);
  --ds-border-soft:      rgba(33, 29, 23, 0.06);   /* warm faint hairline       */

  /* Brand — coral */
  --ds-primary:          #e8553a;
  --ds-primary-contrast: #ffffff;
  --ds-primary-tint:     #fbe3dc;            /* coralSoft                       */
  --ds-primary-tint-12:  rgba(232, 85, 58, 0.12);
  --ds-primary-tint-22:  rgba(232, 85, 58, 0.22);
  --ds-primary-border-25: rgba(232, 85, 58, 0.25);

  /* Status — warm-tuned where it sits on cream */
  --ds-warning-bg:       #fbe6d3;
  --ds-warning-border:   #f1cfa0;
  --ds-warning-text:     #9a4a12;
  /* keep "info" warm/neutral so expand chevrons & info pills don't read cool */
  --ds-info:             #6b6354;
  --ds-info-bg:          #f0e9d6;

  /* Type — Mada throughout (incl. body, which is Arial by default) */
  --ds-font-display:     'Mada', system-ui, sans-serif;
  --ds-font-body:        'Mada', system-ui, -apple-system, sans-serif;

  /* Elevation — soft warm (ink-based) shadows */
  --ds-shadow-xs:            0 1px 2px rgba(33, 29, 23, 0.05);
  --ds-shadow-sm:            0 2px 6px rgba(33, 29, 23, 0.08);
  --ds-shadow-sm-strong:     0 2px 8px rgba(33, 29, 23, 0.12);
  --ds-shadow-raised:        0 4px 12px rgba(33, 29, 23, 0.08);
  --ds-shadow-card:          0 6px 18px rgba(33, 29, 23, 0.06);
  --ds-shadow-md:            0 8px 18px rgba(33, 29, 23, 0.08);
  --ds-shadow-panel:         0 6px 18px rgba(33, 29, 23, 0.1);
  --ds-shadow-floating:      0 10px 24px rgba(33, 29, 23, 0.1);
  --ds-shadow-overlay:       0 16px 40px rgba(33, 29, 23, 0.14);
  --ds-shadow-overlay-strong:0 18px 48px rgba(33, 29, 23, 0.18);
  --ds-shadow-lg:            0 20px 50px rgba(33, 29, 23, 0.16);
  --ds-shadow-primary:       0 6px 12px rgba(232, 85, 58, 0.22);
  --ds-shadow-inset:         inset 0 0 0 1px rgba(33, 29, 23, 0.06);

  /* neutral muted-ink icons (Direction B uses neutral, not accent, icons) */
  --ds-icon-filter:          brightness(0) saturate(100%) opacity(0.72);
}
