/* ApartmentScout design tokens. One place for colour, type, space, radius, elevation and motion.
   Dark is the native theme; [data-theme="light"] overrides the same names. */
:root {
  /* type */
  --font-sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
  /* the type scale: seven text steps (2xs caption, xs label, sm secondary, md body, lg lead, xl heading, 2xl title) plus two display sizes.
     Every stylesheet reads these; a size that is not here is either SVG text in chart units or the thumb scale below. */
  --fs-2xs: 10.5px; --fs-xs: 11.5px; --fs-sm: 12.5px; --fs-md: 13.5px; --fs-lg: 15px;
  --fs-xl: 18px; --fs-2xl: 22px; --fs-3xl: 30px; --fs-4xl: 44px;
  --fs-input: 16px;   /* a field below 16 px makes iOS zoom the page into it */
  /* the thumb scale: Tour day is read at arm's length on a phone, so its steps are a notch larger than the desktop ones */
  --fs-t1: 15px; --fs-t2: 17px; --fs-t3: 20px; --fs-t4: 24px; --fs-t5: 32px;
  --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700;
  --lh-tight: 1.15; --lh-snug: 1.3; --lh-body: 1.5;
  --tracking-tight: -0.015em; --tracking-caps: 0.08em;

  /* space (4px grid) and radius. Three working radii: --r-sm (inputs, small chips), --r-md (buttons, tiles, cards), --r-lg (panels, popovers);
     --r-xs is for tiny inline marks, --r-xl for sheets, --r-pill for pills. */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px;
  --r-xs: 4px; --r-sm: 6px; --r-md: 10px; --r-lg: 14px; --r-xl: 20px; --r-pill: 999px;
  --r-inner: 7px;   /* a segment inside a 10px control with 3px padding: outer radius minus padding */

  /* the notch, the Dynamic Island's strip and the home indicator, as tokens: every phone rule reads these (never env() directly), so a test can
     stand in a notch by overriding them */
  --safe-t: env(safe-area-inset-top, 0px); --safe-r: env(safe-area-inset-right, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px); --safe-l: env(safe-area-inset-left, 0px);

  /* layout */
  --sheet-gap: 10px; --topbar-h: 48px; --stats-h: 28px; --subnav-h: 38px; --rail-w: 288px; --list-w: 432px; --drawer-w: 448px;

  /* motion */
  --ease-out: cubic-bezier(.2, .8, .2, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --ease-spring: cubic-bezier(.34, 1.36, .64, 1);
  --t-fast: 120ms; --t-base: 200ms; --t-slow: 320ms; --t-page: 420ms;   /* hover and press / fades and popovers / sheets and slides / whole views */
  --press-scale: .97; --disabled-opacity: .45;
  /* focus: one ring everywhere */
  --focus-w: 2px; --focus-off: 2px;

  /* fixed colours: official subway palette comes from the GTFS feed; these are the brand and data scales */
  --sun: #f5b547;
  --score-1: #e5604f; --score-2: #ee9b45; --score-3: #d7c95a; --score-4: #67c68a; --score-5: #2fb383;
  --band-10: #3be8b5; --band-20: #27c2c4; --band-30: #3a93e0; --band-45: #6a55b8; --band-60: #7d3a72;
  --tier-1: #3fcf8e; --tier-2: #e8b44c; --tier-3: #ef8a4c; --tier-over: #e5604f;

  /* dark (native) */
  --brand: #12865f;
  --dest-pin: #085c38;
  --brand-tower: #ffffff;
  --ground: #08090c;
  --surface-1: #0e1015;
  --surface-2: #13161d;
  --surface-3: #1a1e27;
  --surface-hover: #1e2330;
  --overlay: rgba(14, 16, 21, 0.78);
  --line: rgba(255, 255, 255, 0.065);
  --line-strong: rgba(255, 255, 255, 0.11);
  --ink: #eef1f6;
  --ink-2: #a9b1bf;
  --ink-3: #808a9c;
  --ink-4: #4a5160;
  --accent: #8b96ff;
  --accent-strong: #a6aeff;
  --accent-ink: #0b0d1f;
  --accent-soft: rgba(139, 150, 255, 0.13);
  --accent-line: rgba(139, 150, 255, 0.35);
  --good: #4fd19a; --warn: #f0b04c; --bad: #f2735f; --info: #6fb4ff;
  --good-soft: rgba(79, 209, 154, 0.12); --warn-soft: rgba(240, 176, 76, 0.12); --bad-soft: rgba(242, 115, 95, 0.12); --info-soft: rgba(111, 180, 255, 0.12);
  --scrim: rgba(4, 5, 8, 0.5);          /* behind a sheet or a popover */
  --scrim-strong: rgba(4, 5, 8, 0.62);  /* behind a modal that takes the whole page */
  --fav: #ffd166;
  --shadow-1: 0 1px 0 rgba(255, 255, 255, 0.03) inset, 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-2: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 8px 24px rgba(0, 0, 0, 0.45), 0 2px 6px rgba(0, 0, 0, 0.3);
  --shadow-3: 0 1px 0 rgba(255, 255, 255, 0.05) inset, 0 24px 64px rgba(0, 0, 0, 0.6), 0 6px 16px rgba(0, 0, 0, 0.35);
  --glass: blur(18px) saturate(140%);
  /* liquid glass: floating panels over the map. Alpha stays high enough that secondary text keeps AA over the
     brightest commute colours; the tint, edge gradient and inner highlight carry the effect. */
  --glass-bg: rgba(15, 18, 26, 0.8);
  --glass-tint: rgba(139, 150, 255, 0.075);
  --glass-blur: blur(22px) saturate(170%);
  --glass-line: rgba(255, 255, 255, 0.1);
  --glass-hi: rgba(255, 255, 255, 0.13);
  --glass-edge-a: rgba(255, 255, 255, 0.24);
  --glass-edge-b: rgba(139, 150, 255, 0.2);
  --glass-seg: rgba(255, 255, 255, 0.1);
  --glass-shadow: 0 12px 34px rgba(0, 0, 0, 0.44), 0 2px 8px rgba(0, 0, 0, 0.3);
  --ink-3-glass: #9ba4b5;
  --ring: 0 0 0 3px var(--accent-soft);
  --lift: 0 6px 18px rgba(0, 0, 0, 0.32);
  --band-alpha: 0.3;
  color-scheme: dark;
}

:root[data-theme="light"] {
  --brand: #05583f;
  --dest-pin: #085c38;
  --brand-tower: #263533;
  --ground: #f4f4f1;
  --surface-1: #ffffff;
  --surface-2: #fafaf8;
  --surface-3: #f1f1ed;
  --surface-hover: #eeeee9;
  --overlay: rgba(255, 255, 255, 0.82);
  --line: rgba(20, 24, 34, 0.075);
  --line-strong: rgba(20, 24, 34, 0.13);
  --ink: #12151c;
  --ink-2: #4b5261;
  --ink-3: #656c7b;
  --ink-4: #aab0bc;
  --accent: #4952e2;   /* was #4b55e6: lifted 0.2:1 so accent text stays AA on a soft wash over --surface-3 */
  --accent-strong: #3a43d0;
  --accent-ink: #ffffff;
  --accent-soft: rgba(75, 85, 230, 0.09);
  --accent-line: rgba(75, 85, 230, 0.32);
  --good: #0b7549; --warn: #8f5a03; --bad: #bd3d27; --info: #1a5fb4;
  --good-soft: rgba(19, 148, 94, 0.09); --warn-soft: rgba(183, 116, 6, 0.09); --bad-soft: rgba(207, 70, 48, 0.09); --info-soft: rgba(26, 95, 180, 0.09);
  --scrim: rgba(20, 24, 34, 0.34);
  --scrim-strong: rgba(20, 24, 34, 0.46);
  --fav: #e0a100;
  --shadow-1: 0 1px 2px rgba(20, 24, 34, 0.06);
  --shadow-2: 0 8px 24px rgba(20, 24, 34, 0.08), 0 2px 6px rgba(20, 24, 34, 0.05);
  --shadow-3: 0 24px 64px rgba(20, 24, 34, 0.16), 0 6px 16px rgba(20, 24, 34, 0.08);
  --glass-bg: rgba(255, 255, 255, 0.84);
  --glass-tint: rgba(75, 85, 230, 0.06);
  --glass-line: rgba(20, 24, 34, 0.1);
  --glass-hi: rgba(255, 255, 255, 0.95);
  --glass-edge-a: rgba(255, 255, 255, 0.95);
  --glass-edge-b: rgba(75, 85, 230, 0.18);
  --glass-seg: rgba(255, 255, 255, 0.95);
  --glass-shadow: 0 12px 32px rgba(20, 24, 34, 0.15), 0 2px 6px rgba(20, 24, 34, 0.07);
  --ink-3-glass: #596070;
  --lift: 0 6px 18px rgba(20, 24, 34, 0.12);
  --band-alpha: 0.26;
  color-scheme: light;
}