/* ============================================================
   Prestigia Homes — Design Tokens
   Single source of truth. Nothing below this file hardcodes a
   colour, a space value, a radius, a duration or an easing curve.
   Direction locked in DESIGN-DIRECTION.md — read that first.
   ============================================================ */

@layer tokens {
  :root {
    /* ---- Colour: midnight mineral ground -------------------- *
     * Legacy variable names remain so the generated site and
     * its components keep one stable semantic contract.         */
    --emerald-deepest: #05090e;
    --emerald: #09131c;
    --emerald-raised: #101e2a;
    --emerald-line: #233442;

    /* ---- Colour: the accent, used rarely by design ---------- */
    --gold: #c98252;
    --gold-bright: #f0c9a4;
    --gold-deep: #7b452d;

    /* ---- Colour: secondary accents from the logo leaves ----- */
    --burgundy: #722f3d;
    --terracotta: #b35f43;

    /* ---- Colour: neutrals ---------------------------------- */
    --ivory: #f2f0e9;
    --ivory-dim: color-mix(in oklch, var(--ivory) 72%, var(--emerald));
    --ivory-faint: color-mix(in oklch, var(--ivory) 46%, var(--emerald));
    --charcoal: #14181d;

    /* ---- Semantic surfaces --------------------------------- */
    --surface-ground: var(--emerald-deepest);
    --surface-section: var(--emerald);
    --surface-raised: var(--emerald-raised);
    --surface-light: var(--ivory);

    --text-on-dark: var(--ivory);
    --text-on-dark-muted: var(--ivory-dim);
    --text-on-light: var(--charcoal);
    --text-on-light-muted: color-mix(in oklch, var(--charcoal) 68%, var(--ivory));

    --accent: var(--gold);
    --accent-hover: var(--gold-bright);

    /* ---- Light source: warm, low angle, upper left ---------- *
     * Every raised surface gets a warm edge on the lit side and
     * a long soft shadow falling down and right. No symmetric
     * box-shadows anywhere in this codebase.                    */
    --edge-light: inset 1px 1px 0 color-mix(in oklch, var(--gold-bright) 22%, transparent);
    --edge-light-strong: inset 1px 1px 0 color-mix(in oklch, var(--gold-bright) 40%, transparent);

    --shadow-plane-1: 6px 10px 24px -8px rgb(0 0 0 / 0.5);
    --shadow-plane-2: 12px 22px 48px -12px rgb(0 0 0 / 0.6);
    --shadow-plane-3: 20px 40px 90px -20px rgb(0 0 0 / 0.7);
    --glow-accent: 0 0 48px -12px color-mix(in oklch, var(--gold) 55%, transparent);

    /* ---- Glass: the 2026 refractive treatment --------------- *
     * Applied to the header and the property enquiry rail only.
     * Never decorative.                                         */
    --glass-tint: color-mix(in oklch, var(--emerald) 54%, transparent);
    --glass-tint-strong: color-mix(in oklch, var(--emerald-deepest) 84%, transparent);
    --glass-blur: 22px;
    --glass-edge: color-mix(in oklch, var(--gold-bright) 26%, transparent);

    /* ---- Typography ---------------------------------------- *
     * Display: Accia Piano (brand). Licence pending — see
     * DESIGN-DIRECTION.md. Instrument Serif is the interim.      */
    --font-display: "Accia Piano", "Instrument Serif", "Iowan Old Style", Georgia, serif;
    --font-body: "Manrope", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;

    --track-display: -0.035em;
    --track-body: 0;
    --track-label: 0.16em;

    /* Fluid scale. Display ceiling capped so the hero never
       overflows the first viewport. */
    --step--1: clamp(0.82rem, 0.79rem + 0.13vw, 0.9rem);
    --step-0: clamp(1rem, 0.96rem + 0.2vw, 1.12rem);
    --step-1: clamp(1.2rem, 1.12rem + 0.4vw, 1.45rem);
    --step-2: clamp(1.5rem, 1.33rem + 0.85vw, 2rem);
    --step-3: clamp(1.95rem, 1.6rem + 1.7vw, 2.9rem);
    --step-4: clamp(2.5rem, 1.85rem + 3.2vw, 4.2rem);
    --step-5: clamp(3.35rem, 1.85rem + 6.4vw, 6rem);

    --leading-tight: 1.04;
    --leading-snug: 1.22;
    --leading-body: 1.62;
    --measure: 68ch;

    /* ---- Space: rhythm through contrast, not repetition ----- */
    --space-3xs: 0.25rem;
    --space-2xs: 0.5rem;
    --space-xs: 0.75rem;
    --space-s: 1rem;
    --space-m: 1.5rem;
    --space-l: 2.25rem;
    --space-xl: 3.5rem;
    --space-2xl: 5.5rem;
    --space-3xl: 8rem;

    --section-pad: clamp(3.5rem, 2rem + 7vw, 8rem);
    --gutter: clamp(1.15rem, 0.6rem + 2.6vw, 3rem);
    --shell: 78rem;
    --shell-narrow: 46rem;

    /* ---- Radius: one scale, held everywhere, max 20px ------- */
    --radius-s: 3px;
    --radius-m: 8px;
    --radius-l: 12px;
    --radius-xl: 18px;
    --radius-pill: 999px;

    /* ---- Motion -------------------------------------------- */
    --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);

    --dur-press: 120ms;
    --dur-hover: 180ms;
    --dur-panel: 240ms;
    --dur-reveal: 620ms;

    /* ---- Layering ------------------------------------------ */
    --z-media: 0;
    --z-content: 1;
    --z-raised: 2;
    --z-header: 50;
    --z-overlay: 100;
  }

  /* Light sections invert the semantics rather than fighting
     them with overrides scattered through the components. */
  .on-light {
    --surface-section: var(--ivory);
    --surface-raised: #fffdf8;
    --text-on-dark: var(--charcoal);
    --text-on-dark-muted: var(--text-on-light-muted);
    --emerald-line: color-mix(in oklch, var(--charcoal) 14%, transparent);
    --edge-light: inset 1px 1px 0 rgb(255 255 255 / 0.9);
    --shadow-plane-1: 5px 9px 22px -10px rgb(25 25 23 / 0.22);
    --shadow-plane-2: 10px 20px 44px -14px rgb(25 25 23 / 0.26);
  }
}