/* ==========================================================================
   ESSARDAS GROUP — DESIGN TOKENS
   The Rock & The Vault — Obsidian & Champagne
   Source of truth: implementation.md §6. Treat as law.
   ========================================================================== */

:root {
  /* ---- Core — obsidian -------------------------------------------------- */
  --obsidian:        #0B0B0D;   /* primary background (dark sections) */
  --onyx:            #141418;   /* raised dark surfaces, cards */
  --graphite:        #1E1E24;   /* hairlines on dark, hover fills */
  --smoke:           #6E6E78;   /* muted text on dark */

  /* ---- Light — bone ----------------------------------------------------- */
  --bone:            #F5F1E9;   /* primary light background */
  --ivory:           #FBF9F4;   /* raised light surfaces, product bg */
  --parchment:       #ECE6D8;   /* light hairlines / dividers */

  /* ---- Precious accent — champagne ------------------------------------- */
  --champagne:       #C8A96A;   /* the ONLY accent. Use sparingly. */
  --champagne-deep:  #A98843;   /* pressed/active gold */
  --champagne-glow:  #E4CF9B;   /* highlights, focus rings on dark */

  /* ---- Text ------------------------------------------------------------- */
  --ink:             #14140F;   /* text on light */
  --ink-soft:        #4A4A42;   /* secondary text on light */
  --chalk:           #F0EDE5;   /* text on dark */
  --chalk-soft:      #B7B7AD;   /* secondary text on dark */

  /* ---- Functional ------------------------------------------------------- */
  --line:            color-mix(in srgb, var(--ink) 12%, transparent);
  --line-dark:       color-mix(in srgb, var(--chalk) 14%, transparent);
  --focus:           var(--champagne-glow);

  /* ---- Typography ------------------------------------------------------- */
  --font-display: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --font-ui:      "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Fluid type scale */
  --fs-eyebrow: clamp(.72rem, .68rem + .2vw, .82rem);
  --fs-body:    clamp(1rem, .96rem + .25vw, 1.125rem);
  --fs-lead:    clamp(1.25rem, 1.1rem + .8vw, 1.6rem);
  --fs-h3:      clamp(1.5rem, 1.2rem + 1.4vw, 2.4rem);
  --fs-h2:      clamp(2.2rem, 1.6rem + 3vw, 4.5rem);
  --fs-h1:      clamp(2.6rem, 1.8rem + 3.5vw, 5rem);
  --fs-display: clamp(3rem, 2rem + 6vw, 8rem);
  --leading-tight: 0.98;
  --leading-body:  1.6;
  --tracking-eyebrow: 0.22em;
  --tracking-ui:      0.04em;

  /* ---- Spacing, layout, grid ------------------------------------------- */
  --space-1: .5rem;  --space-2: 1rem;  --space-3: 1.5rem; --space-4: 2rem;
  --space-5: 2.5rem;
  --space-6: 3rem;
  --space-7: 3.5rem;
  --space-8: 4rem;  --space-12: 6rem;  --space-16: 8rem;
  --section-pad: clamp(4rem, 8vw, 10rem);
  --gutter:      clamp(1.25rem, 4vw, 4rem);
  --maxw:        1440px;
  --maxw-text:   62ch;
  --maxw-narrow: 880px;

  /* ---- Chrome dimensions ----------------------------------------------- */
  --header-h:        84px;
  --header-h-mobile: 64px;

  /* ---- Breakpoints (for reference in JS via getComputedStyle) ---------- */
  --bp-sm:   480px;
  --bp-md:   768px;
  --bp-lg:   1024px;
  --bp-xl:   1280px;
  --bp-2xl:  1536px;

  /* ---- Motion ----------------------------------------------------------- */
  --ease-luxe:   cubic-bezier(0.22, 1, 0.36, 1);   /* power3.out-ish */
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-inout:  cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:    250ms;
  --dur-mid:     500ms;
  --dur-base:    500ms;
  --dur-slow:    900ms;

  /* ---- Elevation (used sparingly; no heavy shadows in luxe spec) -------- */
  --vignette: inset 0 0 120px rgba(0,0,0,0.35);

  /* ---- z-index scale ---------------------------------------------------- */
  --z-cursor:   9999;
  --z-header:   1000;
  --z-overlay:  1100;
  --z-banner:   1200;
  --z-modal:    1300;
}