/*
  VOSTAY design tokens — the single source of truth for colour, type, space,
  elevation and motion. Nothing below this file should invent a raw value.

  Fixed brand input: Petrol + Coral.
    Petrol = structural/primary — nav, active states, calendar base, headings, links.
    Coral  = accent/CTA — the one colour that means "act here". Used deliberately.
  Semantic success/warning/destructive stay distinct from Coral so "needs
  attention" is never confused with the brand accent.

  Everything is authored as HSL triplets so colour and opacity build off the
  same variable: hsl(var(--x) / <alpha>).

  DARK MODE: every semantic token is redefined in the dark block near the
  bottom. Components must only ever reference semantic tokens (--surface,
  --fg-muted, --border, --primary …), never a ramp step like --petrol-600
  directly — a ramp step cannot invert.
*/

:root {
  color-scheme: light;

  /* ---------- Petrol ramp ---------- */
  --petrol-50: 187 45% 96%;
  --petrol-100: 187 42% 91%;
  --petrol-200: 187 40% 82%;
  --petrol-300: 187 38% 68%;
  --petrol-400: 187 40% 52%;
  --petrol-500: 187 55% 38%;
  --petrol-600: 187 62% 26%;
  --petrol-700: 187 65% 21%;
  --petrol-800: 187 68% 16%;
  --petrol-900: 188 70% 11%;
  --petrol-950: 189 72% 7%;

  --primary: var(--petrol-600);
  --primary-hover: var(--petrol-700);
  --primary-foreground: 0 0% 100%;
  /* Petrol tint for surfaces that sit *under* primary content (selected rows,
     soft badges). Separate token so dark mode can flip it without touching
     every call site. */
  --primary-soft: 187 42% 93%;
  --primary-soft-fg: var(--petrol-700);

  /* ---------- Coral ramp ---------- */
  --coral-50: 8 100% 96%;
  --coral-100: 8 95% 91%;
  --coral-200: 8 92% 83%;
  --coral-300: 8 90% 74%;
  --coral-400: 8 88% 66%;
  --coral-500: 8 85% 60%;
  --coral-600: 8 78% 54%;
  --coral-700: 8 70% 45%;

  /* Deliberately a touch deeper than --coral-600 (54% L): white text on 54%
     is 3.99:1, which fails AA for normal text — and this colour carries the
     primary CTA, the unread badge and the brand mark. 48% measures 4.68:1.
     The ramp itself is untouched; only the semantic token moved. */
  --accent: 8 78% 48%;
  --accent-hover: 8 74% 40%;
  --accent-foreground: 0 0% 100%;
  --accent-soft: 8 92% 94%;
  --accent-soft-fg: var(--coral-700);

  /* ---------- Neutrals (cool, petrol-tinted) ----------
     Three surface levels, not two. `sunken` recedes (page wells, table heads,
     inactive segments), `surface` is the default card, `raised` is for things
     that float above a card (popovers, sticky bars, active rows). */
  --bg: 187 22% 98.5%;
  --surface: 0 0% 100%;
  --surface-sunken: 187 24% 96%;
  --surface-raised: 0 0% 100%;
  --fg: 190 32% 11%;
  /* Three text tiers that ALL pass AA on both --surface and --surface-sunken.
     The old values (42% / 58%) put the weakest tier at 2.9:1, and it was
     carrying real information — timestamps, counts, table meta. The gap is
     redistributed downward rather than the tier being deleted. */
  --fg-muted: 190 12% 36%;
  --fg-subtle: 190 11% 42%;
  --border: 187 22% 88%;
  --border-strong: 187 20% 78%;
  --ring: var(--petrol-600);
  /* Scrims sit over content in both modes, so they are their own token. */
  --scrim: 190 32% 6%;

  /* ---------- Semantic states ---------- */
  --success: 152 55% 30%;
  --success-fg: 0 0% 100%;
  --success-bg: 152 50% 94%;

  --warning: 38 95% 31%;   /* doubles as a text colour; 40% measured 3.29:1 on white */
  --warning-fg: 0 0% 100%;
  --warning-bg: 42 95% 93%;

  /* Chart series, fixed order, drawn from the brand instead of a generic
     blue/orange/green: deep petrol (the assistant), light petrol (you) and
     amber (handed to you). The two petrols separate by lightness, amber by
     hue, so the three stay apart under every colour-vision deficiency.
     --chart-2 sits under 3:1 on white: charts using it direct-label or offer
     a table view. Coral stays reserved for actions; status colours for status. */
  --chart-1: 187 62% 27%;
  --chart-2: 187 40% 60%;
  --chart-3: 35 92% 50%;
  --chart-gold: 42 96% 50%;   /* star ratings: fill only, never text */
  --chart-grid: 190 14% 88%;
  --chart-track: 190 20% 94%;

  --destructive: 358 68% 45%;
  --destructive-fg: 0 0% 100%;
  --destructive-bg: 358 75% 96%;

  --info: 210 72% 41%;   /* used as pill text, not just as a fill */
  --info-fg: 0 0% 100%;
  --info-bg: 210 70% 95%;

  /* ---------- Account identity colours (vivid) ----------
     One per mirror.AirbnbAccount.Color choice. Drives account bars, inbox
     avatars, calendar bars and the account profile ring. Deliberately more
     saturated than the apartment set so an account colour never reads as an
     apartment colour. */
  --acct-rose: 345 74% 51%;   /* 56% gave white text 4.11:1 */
  --acct-red: 358 70% 52%;
  --acct-orange: 24 88% 55%;
  --acct-amber: 40 90% 51%;
  --acct-lime: 95 55% 44%;
  --acct-emerald: 155 58% 38%;
  --acct-teal: 186 60% 40%;
  --acct-sky: 200 82% 50%;
  --acct-blue: 220 78% 56%;
  --acct-violet: 272 58% 60%;
  /* Legacy names still emitted by booking-drawer.js and older rows. */
  --acct-pink: 330 70% 55%;
  --acct-purple: 262 50% 55%;
  --acct-green: 152 50% 35%;
  --acct-gray: 210 10% 45%;

  /* ---------- Apartment colours (soft / earthy) ----------
     One per properties.Apartment.Color choice. Muted on purpose — an
     apartment is context, an account is identity. */
  --apt-coral: 10 72% 62%;
  --apt-clay: 20 45% 52%;
  --apt-gold: 43 70% 50%;
  --apt-olive: 72 38% 44%;
  --apt-sage: 140 30% 46%;
  --apt-ocean: 192 45% 46%;
  --apt-cobalt: 224 50% 56%;
  --apt-lavender: 255 40% 66%;
  --apt-plum: 292 35% 52%;
  --apt-slate: 214 16% 48%;

  /* ---------- Typography ---------- */
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Type scale. Large sizes get negative tracking (Inter is drawn loose at
     display sizes); small sizes get positive tracking so 11px labels stay
     readable. Line-heights are unitless so they inherit correctly. */
  --text-3xs: 10.5px;   /* badge counts, lane labels */
  --text-2xs: 11.5px;   /* eyebrows, table heads */
  --text-xs: 12px;
  --text-sm: 13px;
  --text-ui: 13.5px;    /* the app's control size: buttons, rows, table cells */
  --text-base: 15px;    /* body */
  --text-lg: 17px;
  --text-xl: 20px;
  --text-2xl: 24px;
  --text-3xl: 30px;
  --text-4xl: 38px;

  --tracking-tight: -0.022em;
  --tracking-snug: -0.014em;
  --tracking-normal: 0;
  --tracking-wide: 0.04em;
  --tracking-caps: 0.06em;

  --leading-tight: 1.15;
  --leading-snug: 1.3;
  --leading-normal: 1.5;
  --leading-relaxed: 1.65;

  /* ---------- Scale ---------- */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --radius-full: 999px;

  --space-0-5: 2px;    /* nudges: hover shifts, hairline gaps */
  --space-1: 4px;
  --space-1-5: 6px;    /* thin rails: meters, chart tracks */
  --space-2: 8px;
  --space-2-5: 10px;
  --space-3: 12px;
  --space-3-5: 14px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* ---------- Elevation ----------
     Shadows are tinted with the page's own hue rather than neutral black —
     a pure-black shadow on a petrol-tinted background reads as dirt. In dark
     mode shadows barely register, so the dark block swaps most of the lift
     onto borders and surface steps instead. */
  --shadow-xs: 0 1px 2px 0 hsl(190 32% 11% / 0.04);
  --shadow-card: 0 1px 3px 0 hsl(190 32% 11% / 0.06), 0 1px 2px -1px hsl(190 32% 11% / 0.06);
  --shadow-card-hover: 0 4px 16px -4px hsl(190 32% 11% / 0.12), 0 2px 6px -2px hsl(190 32% 11% / 0.07);
  --shadow-popover: 0 4px 24px -4px hsl(190 32% 11% / 0.14), 0 2px 8px -2px hsl(190 32% 11% / 0.08);
  --shadow-modal: 0 20px 60px -12px hsl(190 32% 11% / 0.28);
  /* A hairline that reads as a border on any surface, including dark. */
  --ring-subtle: inset 0 0 0 1px hsl(var(--border));

  /* ---------- Motion (Emil Kowalski-style curves) ----------
     ease-out for anything entering or responding to the user; ease-in-out only
     for things moving across the screen; never ease-in on UI. */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  --dur-instant: 90ms;
  --dur-fast: 120ms;
  --dur-base: 180ms;
  --dur-slow: 260ms;

  /* ---------- Layout ---------- */
  --topbar-h: 60px;
  --sidebar-w: 232px;
  --sidebar-w-collapsed: 72px;
  --bottomnav-h: 64px;
  --content-max: 1400px;
}

/* ============================ DARK ============================
   Applied from the OS preference, unless the user has explicitly chosen
   light (data-theme="light"); data-theme="dark" forces it on. Both selectors
   set the same values, so the rules live in a shared block below.

   Design notes:
   - Backgrounds are petrol-tinted near-blacks, never pure #000 — pure black
     kills depth and makes the Coral accent scream.
   - Elevation inverts: in light, higher = more shadow; in dark, higher =
     lighter surface. Shadows are kept only for true overlays.
   - --primary becomes a LIGHT petrol so it stays legible as text/borders on a
     dark ground, and --primary-foreground goes dark to match it as a fill.
   - Identity colours are lifted in lightness so mid-tone hues (emerald, clay,
     olive) don't disappear into the background.
*/
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    --primary: 187 52% 62%;
    --primary-hover: 187 55% 70%;
    --primary-foreground: 189 72% 8%;
    --primary-soft: 187 40% 18%;
    --primary-soft-fg: 187 45% 76%;

    --accent: 8 82% 62%;
    --accent-hover: 8 86% 69%;
    --accent-foreground: 8 60% 10%;
    --accent-soft: 8 45% 20%;
    --accent-soft-fg: 8 80% 78%;

    --bg: 190 28% 7%;
    --surface: 190 24% 10.5%;
    --surface-sunken: 190 28% 8%;
    --surface-raised: 190 20% 14%;
    --fg: 185 18% 95%;
    --fg-muted: 190 10% 72%;
    --fg-subtle: 190 9% 60%;
    --border: 190 16% 20%;
    --border-strong: 190 14% 30%;
    --ring: 187 52% 62%;
    --scrim: 190 40% 3%;

    --success: 152 48% 58%;
    --success-fg: 152 60% 9%;
    --success-bg: 152 35% 15%;

    --warning: 40 85% 62%;
    --warning-fg: 40 70% 9%;
    --warning-bg: 40 45% 16%;
  --chart-1: 186 55% 64%;
  --chart-2: 187 38% 38%;
  --chart-3: 38 92% 58%;
  --chart-gold: 43 92% 58%;
  --chart-grid: 190 16% 20%;
  --chart-track: 190 18% 16%;

    --destructive: 358 75% 68%;
    --destructive-fg: 358 60% 10%;
    --destructive-bg: 358 40% 18%;

    --info: 210 75% 65%;
    --info-fg: 210 60% 10%;
    --info-bg: 210 40% 18%;

    --acct-rose: 345 72% 65%;
    --acct-red: 358 68% 64%;
    --acct-orange: 24 82% 62%;
    --acct-amber: 40 82% 60%;
    --acct-lime: 95 48% 56%;
    --acct-emerald: 155 48% 52%;
    --acct-teal: 186 52% 54%;
    --acct-sky: 200 75% 62%;
    --acct-blue: 220 72% 68%;
    --acct-violet: 272 55% 70%;
    --acct-pink: 330 65% 66%;
    --acct-purple: 262 48% 68%;
    --acct-green: 152 42% 55%;
    --acct-gray: 210 8% 58%;

    --apt-coral: 10 65% 66%;
    --apt-clay: 20 44% 60%;
    --apt-gold: 43 62% 58%;
    --apt-olive: 72 34% 55%;
    --apt-sage: 140 28% 57%;
    --apt-ocean: 192 42% 56%;
    --apt-cobalt: 224 48% 66%;
    --apt-lavender: 255 40% 72%;
    --apt-plum: 292 34% 63%;
    --apt-slate: 214 15% 60%;

    /* Lift comes from the surface step and a hairline, not from a shadow that
       nobody can see on a near-black ground. */
    --shadow-xs: 0 1px 2px 0 hsl(190 60% 2% / 0.4);
    --shadow-card: 0 1px 2px 0 hsl(190 60% 2% / 0.5);
    --shadow-card-hover: 0 6px 20px -6px hsl(190 60% 2% / 0.7);
    --shadow-popover: 0 8px 30px -6px hsl(190 60% 2% / 0.75), 0 2px 8px -2px hsl(190 60% 2% / 0.6);
    --shadow-modal: 0 24px 70px -14px hsl(190 60% 2% / 0.85);
  }
}

/* Explicit user choice, independent of the OS preference. Kept as a duplicate
   block rather than a shared custom-property list because a media query can't
   be OR-ed with an attribute selector in plain CSS. */
:root[data-theme="dark"] {
  color-scheme: dark;

  --primary: 187 52% 62%;
  --primary-hover: 187 55% 70%;
  --primary-foreground: 189 72% 8%;
  --primary-soft: 187 40% 18%;
  --primary-soft-fg: 187 45% 76%;

  --accent: 8 82% 62%;
  --accent-hover: 8 86% 69%;
  --accent-foreground: 8 60% 10%;
  --accent-soft: 8 45% 20%;
  --accent-soft-fg: 8 80% 78%;

  --bg: 190 28% 7%;
  --surface: 190 24% 10.5%;
  --surface-sunken: 190 28% 8%;
  --surface-raised: 190 20% 14%;
  --fg: 185 18% 95%;
  --fg-muted: 190 10% 72%;
  --fg-subtle: 190 9% 60%;
  --border: 190 16% 20%;
  --border-strong: 190 14% 30%;
  --ring: 187 52% 62%;
  --scrim: 190 40% 3%;

  --success: 152 48% 58%;
  --success-fg: 152 60% 9%;
  --success-bg: 152 35% 15%;

  --warning: 40 85% 62%;
  --warning-fg: 40 70% 9%;
  --warning-bg: 40 45% 16%;
  --chart-1: 186 55% 64%;
  --chart-2: 187 38% 38%;
  --chart-3: 38 92% 58%;
  --chart-gold: 43 92% 58%;
  --chart-grid: 190 16% 20%;
  --chart-track: 190 18% 16%;

  --destructive: 358 75% 68%;
  --destructive-fg: 358 60% 10%;
  --destructive-bg: 358 40% 18%;

  --info: 210 75% 65%;
  --info-fg: 210 60% 10%;
  --info-bg: 210 40% 18%;

  --acct-rose: 345 72% 65%;
  --acct-red: 358 68% 64%;
  --acct-orange: 24 82% 62%;
  --acct-amber: 40 82% 60%;
  --acct-lime: 95 48% 56%;
  --acct-emerald: 155 48% 52%;
  --acct-teal: 186 52% 54%;
  --acct-sky: 200 75% 62%;
  --acct-blue: 220 72% 68%;
  --acct-violet: 272 55% 70%;
  --acct-pink: 330 65% 66%;
  --acct-purple: 262 48% 68%;
  --acct-green: 152 42% 55%;
  --acct-gray: 210 8% 58%;

  --apt-coral: 10 65% 66%;
  --apt-clay: 20 44% 60%;
  --apt-gold: 43 62% 58%;
  --apt-olive: 72 34% 55%;
  --apt-sage: 140 28% 57%;
  --apt-ocean: 192 42% 56%;
  --apt-cobalt: 224 48% 66%;
  --apt-lavender: 255 40% 72%;
  --apt-plum: 292 34% 63%;
  --apt-slate: 214 15% 60%;

  --shadow-xs: 0 1px 2px 0 hsl(190 60% 2% / 0.4);
  --shadow-card: 0 1px 2px 0 hsl(190 60% 2% / 0.5);
  --shadow-card-hover: 0 6px 20px -6px hsl(190 60% 2% / 0.7);
  --shadow-popover: 0 8px 30px -6px hsl(190 60% 2% / 0.75), 0 2px 8px -2px hsl(190 60% 2% / 0.6);
  --shadow-modal: 0 24px 70px -14px hsl(190 60% 2% / 0.85);
}

/* Motion is opt-out, not opt-in: collapsing the duration tokens disables every
   transition built on them in one place. Hardcoded durations (looping
   spinners, the skeleton sweep) opt out individually at their definition. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-instant: 0.01ms;
    --dur-fast: 0.01ms;
    --dur-base: 0.01ms;
    --dur-slow: 0.01ms;
  }
}