/* ==========================================================================
   VeltHaven — Design Tokens v1 (Visual Design gate candidate)
   Source of truth for the WordPress theme once approved (02_design/DESIGN_SYSTEM.md).
   All text-colour pairs verified >=4.5:1 (large/UI >=3:1) — see DESIGN_SYSTEM.md §2.
   ========================================================================== */
:root {
  /* --- Brand: anthracite (locked, RAL 7016) --- */
  --anthracite:       #2B2F33;
  --anthracite-deep:  #1F2326;
  --anthracite-soft:  #3A3F45;

  /* --- Text --- */
  --ink:              #1F2326;  /* 15.8:1 on white */
  --ink-2:            #4B5563;  /* 7.6:1 white · 6.3:1 bg-3 — minimum grey, never lighter */
  --ink-on-dark:      #FFFFFF;  /* 13.5:1 on anthracite */
  --ink-on-dark-2:    #D5DADE;  /* 9.6:1 on anthracite */

  /* --- Surfaces (warm stone — pairs with timber/bronze) --- */
  --bg:               #FFFFFF;
  --bg-2:             #F6F5F2;
  --bg-3:             #ECEAE6;
  --line:             #DCDAD5;

  /* --- Accent: bronze trim (Option A — recommended; see DESIGN_SYSTEM.md §2.4).
         LAW: <=5% of any viewport; trim not paint; never body text below ramp rules. --- */
  --accent-50:        #F6F0E5;  /* tint backgrounds only */
  --accent-400:       #A8845A;  /* 3.4:1 — LARGE/UI ONLY (rules, ticks, dots, strokes) */
  --accent-600:       #7A6038;  /* 5.9:1 white / 5.4:1 bg-2 — accent text (eyebrows, links) */
  --accent-on-dark:   #C9A86A;  /* 6.0:1 anthracite / 7.0:1 deep */
  --star:             #B8893B;  /* star glyph fill, decorative only */

  /* --- Semantic (forms) — always pair with icon/text, never colour alone --- */
  --error:            #B42318;  /* 6.6:1 on white */
  --success:          #176B3F;  /* 6.5:1 on white */

  /* --- Typography (theme self-hosts: Archivo var + Inter var, latin+latin-ext) --- */
  --font-head: "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-body: "Inter",   system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  --fs-display: clamp(2.25rem, 1.5rem + 3.6vw, 3.75rem); /* homepage h1 only */
  --fs-h1:      clamp(2rem, 1.4rem + 2.8vw, 3rem);
  --fs-h2:      clamp(1.625rem, 1.25rem + 1.8vw, 2.25rem);
  --fs-h3:      clamp(1.25rem, 1.1rem + 0.8vw, 1.5rem);
  --fs-xl:      1.375rem;   /* prices */
  --fs-lg:      1.125rem;   /* lead */
  --fs-md:      1.0625rem;  /* journey markers, mid-scale UI */
  --fs-base:    1rem;       /* 16px FLOOR — never below for body */
  --fs-sm:      0.9375rem;  /* captions/labels only */
  --fs-xs:      0.8125rem;  /* micro-labels: swatch names, progress step labels */

  --lh-tight:   1.15;
  --lh-body:    1.6;
  --track-head: -0.015em;
  --track-caps: 0.14em;

  /* --- Space (8px rhythm) --- */
  --sp-1: 0.5rem;  --sp-2: 1rem;   --sp-3: 1.5rem; --sp-4: 2rem;
  --sp-5: 3rem;    --sp-6: 4rem;   --sp-7: 6rem;

  /* --- Layout --- */
  --maxw: 1200px;
  --gutter: 1.5rem;

  /* --- Shape --- */
  --radius:    12px;  /* cards, media */
  --radius-sm: 8px;   /* buttons, inputs, chips */

  /* --- Touch --- */
  --tap: 44px;        /* WCAG floor */
  --tap-comfort: 48px;/* what we actually build */

  /* --- Elevation (3 steps only) --- */
  --shadow-sm: 0 1px 2px rgba(31,35,38,.05), 0 3px 10px rgba(31,35,38,.05);
  --shadow-md: 0 2px 6px rgba(31,35,38,.06), 0 10px 28px rgba(31,35,38,.10);
  --shadow-lg: 0 -2px 8px rgba(31,35,38,.06), 0 -8px 32px rgba(31,35,38,.14);

  /* --- Motion (transform/opacity only; reduced-motion kills all) --- */
  --dur-fast: 150ms;
  --dur-base: 220ms;
  --dur-slow: 320ms;
  --ease-out: cubic-bezier(.16,1,.3,1);
  --ease-in:  cubic-bezier(.7,0,.84,0);
}