/* ==========================================================================
   방콕 3D 동선 — design tokens
   Light is the default. Dark applies with :root[data-theme="dark"], or with the
   system setting unless the page pins :root[data-theme="light"].
   All derived colours are OKLCH. The only hex values are the fixed transit-line
   and overview day colours, which come from the data (README / map3d.js).
   ========================================================================== */

:root {
  color-scheme: light;

  /* ---- Neutrals: a cool green-grey that sits next to the teal brand ---- */
  --bg:             oklch(0.955 0.006 165);  /* page behind the map (rarely seen) */
  --surface:        oklch(0.995 0.002 165);  /* panels, sheets, cards */
  --surface-2:      oklch(0.972 0.005 165);  /* sunken rows, block cards */
  --surface-3:      oklch(0.940 0.008 165);  /* hover on surface-2 */
  --surface-glass:  oklch(0.995 0.002 165 / 0.92); /* floating controls over the map */
  --fg:             oklch(0.240 0.014 175);  /* primary text */
  --fg-2:           oklch(0.420 0.014 175);  /* secondary text */
  --muted:          oklch(0.505 0.012 175);  /* tertiary text, still ≥ 4.5:1 on surface-2 */
  --border:         oklch(0.905 0.008 165);
  --border-strong:  oklch(0.830 0.010 165);
  --rail-neutral:   oklch(0.850 0.010 165);  /* timeline rail through stops and walks */
  --inverse-bg:     oklch(0.240 0.014 175);  /* selected day tab, toast */
  --inverse-fg:     oklch(0.985 0.003 165);
  --scrim:          oklch(0.200 0.020 175 / 0.42);

  /* ---- Brand ---- */
  --accent:         oklch(0.480 0.085 188);  /* teal, ≈ #0b6e69 of the current app */
  --accent-hover:   oklch(0.420 0.080 188);
  --accent-ink:     oklch(0.990 0.004 188);
  --accent-soft:    oklch(0.945 0.028 188);
  --accent-soft-hover: oklch(0.900 0.040 188);
  --accent-text:    oklch(0.430 0.080 188);  /* teal used as text / links */
  --focus:          oklch(0.560 0.120 188);

  --gold:           oklch(0.560 0.110 75);   /* 3D landmark fill; white numerals 4.7:1 */
  --gold-halo:      oklch(0.860 0.100 85);
  --gold-soft:      oklch(0.950 0.040 85);
  --gold-text:      oklch(0.470 0.090 70);

  /* ---- Status (text colours are AA on their soft backgrounds) ---- */
  --ok:             oklch(0.500 0.110 150);
  --ok-soft:        oklch(0.955 0.030 150);
  --warn:           oklch(0.510 0.115 60);
  --warn-dot:       oklch(0.700 0.150 65);
  --warn-soft:      oklch(0.955 0.045 80);
  --err:            oklch(0.520 0.180 27);
  --err-soft:       oklch(0.955 0.028 25);
  --info:           oklch(0.500 0.100 250);
  --info-soft:      oklch(0.955 0.022 250);

  /* ---- Transit modes (fixed hues from the brief) ---- */
  --mode-walk:      oklch(0.620 0.010 175);
  --mode-bts:       #5fae3a;
  --mode-mrt:       #1a57a5;
  --mode-arl:       #9b1c31;
  --mode-srt:       #b5121b;
  --mode-boat:      #e67d1c;
  --mode-ferry:     #d9a21b;
  --mode-car:       #d63f76;
  --mode-van:       #7a4fc2;
  /* Tag text on the line colour. White fails on BTS/boat/ferry (2.3–2.9:1),
     so those tags use dark ink; taxi keeps white on a slightly deeper tag. */
  --mode-on:        oklch(0.990 0 0);
  --mode-on-light:  oklch(0.220 0.015 175);
  --mode-car-tag:   oklch(0.550 0.170 358);

  /* ---- Overview day colours (BKK.DAY_COLORS in map3d.js) ---- */
  --day-1: #d99a00;  --day-2: #0f9f96;  --day-3: #e8603c;  --day-4: #6c5ce7;
  --day-5: #2f9e44;  --day-6: #d6336c;  --day-7: #1c7ed6;

  /* ---- Map markers: fixed in both themes because the basemap stays light ---- */
  --mk-stop:        oklch(0.260 0.015 175);
  --mk-landmark:    oklch(0.560 0.110 75);
  --mk-landmark-halo: oklch(0.860 0.100 85 / 0.85);
  --mk-lodging:     oklch(0.480 0.085 188);
  --mk-air:         oklch(0.500 0.100 250);
  --mk-on:          oklch(1 0 0);
  --mk-ring:        oklch(1 0 0);
  --mk-edge:        oklch(0.200 0.020 175 / 0.55);
  --mk-label-bg:    oklch(1 0 0 / 0.96);
  --mk-label-fg:    oklch(0.240 0.014 175);
  --mk-focus:       oklch(0.480 0.085 188);
  --mk-shadow:     0 1px 2px oklch(0.2 0.02 175 / 0.35), 0 3px 8px oklch(0.2 0.02 175 / 0.22);

  /* ---- Legacy aliases: ui.js writes these names into inline styles ----
     style="--rail: var(--line)", "--mode: var(--ink-3)", "--mode: var(--gold)" */
  --line:           var(--rail-neutral);
  --ink:            var(--fg);
  --ink-2:          var(--fg-2);
  --ink-3:          var(--muted);

  /* ---- Type ---- */
  --font-ko:   'IBM Plex Sans KR', 'Apple SD Gothic Neo', 'Malgun Gothic', system-ui, sans-serif;
  --font-th:   'IBM Plex Sans Thai', 'Leelawadee UI', Tahoma, sans-serif;
  --font-num:  'Chakra Petch', 'IBM Plex Sans KR', system-ui, sans-serif; /* dates, pin numerals, preset letters */
  --font-mono: 'IBM Plex Mono', ui-monospace, Consolas, monospace;       /* combination code only */
  --font-disp: var(--font-num);                                          /* legacy alias */

  --fs-2xs: 11px;   /* pills, tab captions */
  --fs-xs:  12px;   /* captions, notes */
  --fs-sm:  13px;   /* secondary body */
  --fs-md:  14px;   /* body */
  --fs-lg:  15px;   /* list titles, stop names */
  --fs-xl:  17px;   /* card titles */
  --fs-2xl: 20px;   /* brand */
  --fs-3xl: 28px;   /* day date */
  --lh-tight: 1.25;
  --lh-snug:  1.4;
  --lh-body:  1.55;
  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semi:    600;
  --fw-bold:    700;

  /* ---- Space (4px grid) ---- */
  --sp-0: 2px;  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px;
  --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px;

  /* ---- Radius ---- */
  --r-xs: 6px;  --r-sm: 8px;  --r-md: 12px;  --r-lg: 16px;  --r-xl: 22px;  --r-pill: 999px;

  /* ---- Elevation ---- */
  --shadow-1: 0 1px 2px oklch(0.2 0.02 175 / 0.10), 0 2px 8px oklch(0.2 0.02 175 / 0.10);
  --shadow-2: 0 2px 4px oklch(0.2 0.02 175 / 0.08), 0 10px 28px oklch(0.2 0.02 175 / 0.16);
  --shadow-3: 0 -1px 6px oklch(0.2 0.02 175 / 0.06), 0 16px 44px oklch(0.2 0.02 175 / 0.24);

  /* ---- Layers ---- */
  --z-map: 0;  --z-map-ctl: 4;  --z-legend: 4;  --z-panel: 5;  --z-topbar: 6;
  --z-card: 7; --z-scrim: 8;    --z-plan: 9;    --z-popover: 10; --z-modal: 20; --z-toast: 30;

  /* ---- Motion ---- */
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 320ms;
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-sheet:    cubic-bezier(0.32, 0.72, 0, 1);

  /* ---- Layout ---- */
  --tap: 44px;                 /* minimum touch target on phones */
  --edge: 12px;                /* inset of floating UI from the viewport edge */
  --panel-w: 392px;            /* desktop left column */
  --topbar-h: 136px;           /* desktop header height; shell.js measures and overwrites */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --sheet-peek: calc(158px + var(--safe-bottom));
  --sheet-half: 50%;
  --sheet-full: calc(100% - var(--safe-top) - 68px);
  --sheet-h: var(--sheet-half); /* current sheet height; shell.js keeps it in sync */
}

/* ---- Dark: surfaces only. Markers and mode hues stay (the basemap is light). ---- */
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg:             oklch(0.160 0.010 175);
  --surface:        oklch(0.205 0.012 175);
  --surface-2:      oklch(0.240 0.012 175);
  --surface-3:      oklch(0.285 0.013 175);
  --surface-glass:  oklch(0.205 0.012 175 / 0.92);
  --fg:             oklch(0.940 0.008 165);
  --fg-2:           oklch(0.800 0.010 165);
  --muted:          oklch(0.690 0.012 165);
  --border:         oklch(0.310 0.012 175);
  --border-strong:  oklch(0.400 0.014 175);
  --rail-neutral:   oklch(0.420 0.014 175);
  --inverse-bg:     oklch(0.940 0.008 165);
  --inverse-fg:     oklch(0.200 0.012 175);
  --scrim:          oklch(0.100 0.010 175 / 0.60);
  --accent:         oklch(0.740 0.100 185);
  --accent-hover:   oklch(0.810 0.090 185);
  --accent-ink:     oklch(0.200 0.030 188);
  --accent-soft:    oklch(0.320 0.045 188);
  --accent-soft-hover: oklch(0.370 0.050 188);
  --accent-text:    oklch(0.800 0.090 185);
  --focus:          oklch(0.780 0.110 185);
  --gold-soft:      oklch(0.320 0.050 80);
  --gold-text:      oklch(0.830 0.100 80);
  --ok:             oklch(0.790 0.120 150);
  --ok-soft:        oklch(0.300 0.040 150);
  --warn:           oklch(0.830 0.120 75);
  --warn-soft:      oklch(0.320 0.050 70);
  --err:            oklch(0.760 0.140 27);
  --err-soft:       oklch(0.320 0.060 25);
  --info:           oklch(0.790 0.080 250);
  --info-soft:      oklch(0.300 0.040 250);
  --mode-walk:      oklch(0.720 0.012 165);
  --shadow-1: 0 1px 2px oklch(0 0 0 / 0.40), 0 2px 8px oklch(0 0 0 / 0.30);
  --shadow-2: 0 2px 4px oklch(0 0 0 / 0.35), 0 10px 28px oklch(0 0 0 / 0.45);
  --shadow-3: 0 -1px 6px oklch(0 0 0 / 0.25), 0 16px 44px oklch(0 0 0 / 0.55);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg:             oklch(0.160 0.010 175);
    --surface:        oklch(0.205 0.012 175);
    --surface-2:      oklch(0.240 0.012 175);
    --surface-3:      oklch(0.285 0.013 175);
    --surface-glass:  oklch(0.205 0.012 175 / 0.92);
    --fg:             oklch(0.940 0.008 165);
    --fg-2:           oklch(0.800 0.010 165);
    --muted:          oklch(0.690 0.012 165);
    --border:         oklch(0.310 0.012 175);
    --border-strong:  oklch(0.400 0.014 175);
    --rail-neutral:   oklch(0.420 0.014 175);
    --inverse-bg:     oklch(0.940 0.008 165);
    --inverse-fg:     oklch(0.200 0.012 175);
    --scrim:          oklch(0.100 0.010 175 / 0.60);
    --accent:         oklch(0.740 0.100 185);
    --accent-hover:   oklch(0.810 0.090 185);
    --accent-ink:     oklch(0.200 0.030 188);
    --accent-soft:    oklch(0.320 0.045 188);
  --accent-soft-hover: oklch(0.370 0.050 188);
    --accent-text:    oklch(0.800 0.090 185);
    --focus:          oklch(0.780 0.110 185);
    --gold-soft:      oklch(0.320 0.050 80);
    --gold-text:      oklch(0.830 0.100 80);
    --ok:             oklch(0.790 0.120 150);
    --ok-soft:        oklch(0.300 0.040 150);
    --warn:           oklch(0.830 0.120 75);
    --warn-soft:      oklch(0.320 0.050 70);
    --err:            oklch(0.760 0.140 27);
    --err-soft:       oklch(0.320 0.060 25);
    --info:           oklch(0.790 0.080 250);
    --info-soft:      oklch(0.300 0.040 250);
    --mode-walk:      oklch(0.720 0.012 165);
    --shadow-1: 0 1px 2px oklch(0 0 0 / 0.40), 0 2px 8px oklch(0 0 0 / 0.30);
    --shadow-2: 0 2px 4px oklch(0 0 0 / 0.35), 0 10px 28px oklch(0 0 0 / 0.45);
    --shadow-3: 0 -1px 6px oklch(0 0 0 / 0.25), 0 16px 44px oklch(0 0 0 / 0.55);
  }
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast: 0ms; --dur-base: 0ms; --dur-slow: 0ms; }
}