/*
 * PH Volcancito showroom v2 — design tokens.
 * The ONLY file that may contain raw colour values (contract §3).
 * Everything else references these custom properties.
 *
 * Layers:
 *   1. Brand + status primitives (names fixed by the build contract).
 *   2. Alpha ramps derived from the primitives (glass, scrims, mist).
 *   3. Semantic surface tokens (redefined inside [data-surface="dark"]).
 *   4. Type, space, radius, elevation, motion, layout and z-index scales.
 *   5. Compatibility aliases so every workstream can use its natural name.
 */

:root {
  /* 1 · Brand primitives ------------------------------------------------ */
  --basalt: #1C211F;            /* ink */
  --mist: #F2F2EE;              /* surface */
  --mist-glass: rgba(242, 242, 238, .80);
  --fog: #E3E5E0;               /* secondary surface */
  --line: rgba(28, 33, 31, .12);
  --pine: #274536;              /* primary action */
  --pine-ink: #F2F2EE;          /* text on primary */
  --olive: #666252;             /* brand */
  --timber: #9A6A43;            /* accent: price, active marker (sparingly) */
  --muted: #545A54;             /* secondary text, ≥ 4.5:1 on mist */
  --white: #FFFFFF;
  --paper: #FAFAF7;             /* raised card surface on mist */

  /* Pine / olive / timber shades for interaction states */
  --pine-hover: #1F3A2D;
  --pine-press: #172C22;
  --pine-soft: #DDE5DF;
  --olive-deep: #4F4C3F;
  --timber-soft: #F3E9DF;
  --timber-ink: #815B3C;        /* timber 80% + basalt: price text, ≥ 4.5:1 on mist and on strong glass */
  --basalt-soft: #2A302D;

  /* Status (mirrored in availability.js statuses[*].css and the 3D) */
  --st-available: #2F7D4F;
  --st-reserved: #B7791F;
  --st-sold: #B23A31;
  --st-unavailable: #7C818A;
  --st-unknown: #6B7280;
  --st-available-tint: rgba(47, 125, 79, .12);
  --st-reserved-tint: rgba(183, 121, 31, .14);
  --st-sold-tint: rgba(178, 58, 49, .12);
  --st-unavailable-tint: rgba(124, 129, 138, .14);
  --st-unknown-tint: rgba(107, 114, 128, .12);
  /* Text-safe status inks on light tints (AA on mist) */
  --st-available-ink: #25663F;
  --st-reserved-ink: #7E5210;
  --st-sold-ink: #962E27;
  --st-unavailable-ink: #555A62;
  --st-unknown-ink: #4B5260;

  /* 2 · Alpha ramps -------------------------------------------------------- */
  --mist-a0: rgba(242, 242, 238, 0);
  --mist-a10: rgba(242, 242, 238, .10);
  --mist-a18: rgba(242, 242, 238, .18);
  --mist-a28: rgba(242, 242, 238, .28);
  --mist-a45: rgba(242, 242, 238, .45);
  --mist-a60: rgba(242, 242, 238, .60);
  --mist-a72: rgba(242, 242, 238, .72);
  --mist-a92: rgba(242, 242, 238, .92);
  --basalt-a0: rgba(28, 33, 31, 0);
  --basalt-a06: rgba(28, 33, 31, .06);
  --basalt-a08: rgba(28, 33, 31, .08);
  --basalt-a20: rgba(28, 33, 31, .20);
  --basalt-a32: rgba(28, 33, 31, .32);
  --basalt-a42: rgba(28, 33, 31, .42);
  --basalt-a58: rgba(28, 33, 31, .58);
  --basalt-a72: rgba(28, 33, 31, .72);
  --basalt-a86: rgba(28, 33, 31, .86);
  --pine-a0: rgba(39, 69, 54, 0);
  --pine-a12: rgba(39, 69, 54, .12);
  --pine-a36: rgba(39, 69, 54, .36);
  --pine-a64: rgba(39, 69, 54, .64);
  --pine-a88: rgba(39, 69, 54, .88);
  --white-a16: rgba(255, 255, 255, .16);
  --white-a28: rgba(255, 255, 255, .28);
  --white-a72: rgba(255, 255, 255, .72);
  --white-a86: rgba(255, 255, 255, .86);
  --shadow-a06: rgba(0, 0, 0, .06);
  --shadow-a08: rgba(0, 0, 0, .08);
  --shadow-a16: rgba(0, 0, 0, .16);
  --shadow-a28: rgba(0, 0, 0, .28);

  /* 3 · Semantic surfaces (light "mist" default) -------------------------- */
  --surface: var(--mist);
  --surface-raised: var(--paper);
  --surface-sunken: var(--fog);
  --surface-glass: var(--mist-glass);
  --surface-glass-strong: var(--mist-a92);
  --surface-glass-text: var(--mist-a92); /* floating panels that carry 12–13 px text over the 3D */
  --surface-inverse: var(--basalt);
  --ink: var(--basalt);
  --ink-muted: var(--muted);
  --ink-inverse: var(--mist);
  --border: var(--line);
  --border-strong: var(--basalt-a20);
  --control-border: var(--basalt-a58); /* ≥ 3:1 boundary for checkboxes, switches and fields (WCAG 1.4.11) */
  --hover: var(--basalt-a06);
  --press: var(--basalt-a08);
  --scrim: var(--basalt-a42);
  --focus-ring: var(--pine);
  --focus-ring-outer: var(--mist); /* halo that keeps rings visible over the 3D canvas at dusk */
  --accent: var(--timber);
  --price-ink: var(--timber-ink);
  --glass-filter: blur(18px) saturate(1.1);

  /* 4 · Typography --------------------------------------------------------- */
  --font-ui: 'Raleway', 'Avenir Next', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-display: 'Libre Baskerville', 'Baskerville', Georgia, 'Times New Roman', serif;
  --fs-12: 12px;
  --fs-13: 13px;
  --fs-14: 14px;
  --fs-16: 16px;
  --fs-20: 20px;
  --fs-24: 24px;
  --fs-32: 32px;
  --fs-44: 44px;
  --lh-tight: 1.15;
  --lh-snug: 1.3;
  --lh-body: 1.55;
  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --tracking-caps: .12em;
  --tracking-wide: .04em;
  --numeric: lining-nums tabular-nums;

  /* Spacing (4-pt) */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;

  /* Radius */
  --r-xs: 6px;
  --r-card: 10px;
  --r-panel: 14px;
  --r-pill: 999px;

  /* Elevation */
  --elev-1: 0 1px 2px var(--shadow-a06), 0 4px 16px var(--shadow-a08);
  --elev-2: 0 8px 40px var(--shadow-a16);
  --elev-3: 0 18px 64px var(--shadow-a28);

  /* Motion */
  --ease: cubic-bezier(.2, .7, .2, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --dur-fast: 180ms;
  --dur: 220ms;
  --dur-slow: 280ms;
  --dur-fade: 400ms;
  --dur-camera: 1200ms;
  --dur-mist: 2400ms;

  /* Layout */
  --gutter: 12px;
  --topbar-h: 64px;
  --context-h: 44px;
  --rail-w: 360px;
  --drawer-w: 400px;
  --notes-w: 440px;
  --touch: 44px;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --chrome-top: calc(var(--safe-top) + var(--gutter) + var(--topbar-h) + var(--sp-2) + var(--context-h) + var(--sp-2));
  --chrome-bottom: calc(var(--safe-bottom) + var(--gutter));
  --sheet-peek: 96px;

  /* Z-index scale */
  --z-stage: 0;
  --z-stage-overlays: 10;
  --z-views: 20;
  --z-panels: 30;
  --z-chrome: 40;
  --z-sheet: 50;
  --z-notes: 60;
  --z-popover: 70;
  --z-toast: 80;
  --z-splash: 90;

  /* 5 · Compatibility aliases (other workstreams may use these names) ----- */
  --space-4: var(--sp-1);
  --space-8: var(--sp-2);
  --space-12: var(--sp-3);
  --space-16: var(--sp-4);
  --space-24: var(--sp-5);
  --space-32: var(--sp-6);
  --space-48: var(--sp-7);
  --space-64: var(--sp-8);
  --radius-card: var(--r-card);
  --radius-panel: var(--r-panel);
  --radius-pill: var(--r-pill);
  --font-sans: var(--font-ui);
  --font-serif: var(--font-display);
  --text-12: var(--fs-12);
  --text-13: var(--fs-13);
  --text-14: var(--fs-14);
  --text-16: var(--fs-16);
  --text-20: var(--fs-20);
  --text-24: var(--fs-24);
  --text-32: var(--fs-32);
  --text-44: var(--fs-44);
  --motion-fast: var(--dur-fast);
  --motion: var(--dur);
  --motion-slow: var(--dur-slow);
  --motion-camera: var(--dur-camera);
  --ease-out: var(--ease);
  --status-available: var(--st-available);
  --status-reserved: var(--st-reserved);
  --status-sold: var(--st-sold);
  --status-unavailable: var(--st-unavailable);
  --status-unknown: var(--st-unknown);
}

/* Dark / photographic surfaces (tour photo viewer, splash, green bands).
   Components that use the semantic tokens adapt automatically. */
[data-surface="dark"] {
  --surface: var(--basalt);
  --surface-raised: var(--basalt-soft);
  --surface-sunken: var(--basalt-a86);
  --surface-glass: var(--basalt-a58);
  --surface-glass-strong: var(--basalt-a86);
  --surface-glass-text: var(--basalt-a58);
  --surface-inverse: var(--mist);
  --ink: var(--mist);
  --ink-muted: var(--white-a72);
  --ink-inverse: var(--basalt);
  --border: var(--white-a16);
  --border-strong: var(--white-a28);
  --control-border: var(--white-a72);
  --hover: var(--white-a16);
  --press: var(--white-a28);
  --focus-ring: var(--mist);
  --focus-ring-outer: var(--basalt);
  --price-ink: var(--mist);
}

[data-surface="green"] {
  --surface: var(--pine);
  --surface-raised: var(--pine-hover);
  --surface-glass: var(--pine-a88);
  --surface-glass-strong: var(--pine);
  --surface-glass-text: var(--pine-a88);
  --ink: var(--pine-ink);
  --ink-muted: var(--white-a72);
  --border: var(--white-a16);
  --border-strong: var(--white-a28);
  --control-border: var(--white-a72);
  --hover: var(--white-a16);
  --press: var(--white-a28);
  --focus-ring: var(--mist);
  --focus-ring-outer: var(--basalt);
  --price-ink: var(--mist);
}

@media (max-width: 1099px) {
  :root {
    --rail-w: 320px;
    --drawer-w: 360px;
  }
}

@media (max-width: 759px) {
  :root {
    --gutter: 8px;
    --topbar-h: 56px;
    --context-h: 44px;
    --notes-w: 100vw;
  }
}