/* ============================================================================
   ADRIANO JEWELRY · tokens.css
   The single source of truth for the design system (CLAUDE.md §1.2).
   Concept: "Espresso & Champagne" — warm espresso velvet, disciplined champagne
   gold, cream light chapters. (Retuned from the VERVE palette, 2026-07-09.)

   NAMING LAW: tokens are named by ROLE, never by colour. --bg / --surface /
   --accent / --text survive a palette change; --noir / --gold would become lies.
   Nothing in the site uses a raw hex/size/duration — everything reads from here.

   Load order (every page): tokens.css → base.css → components.css → page sheet.
   Paths are ROOT-RELATIVE (/adrianojewelry/…) so they resolve at any page depth,
   live on Cloudflare Pages and under serve-local.cmd.
   ============================================================================ */

/* ---------------------------------------------------------------------------
   Self-hosted fonts — subset to latin, downloaded once & committed (no CDN,
   no npm). Served as VARIABLE woff2 files, so a single file covers a weight
   range via `font-weight: <min> <max>`. font-display:swap; reveal animations
   wait on document.fonts.ready (js) so text never shifts mid-animation.
   --------------------------------------------------------------------------- */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 500 600;
  font-display: swap;
  src: url('/adrianojewelry/assets/fonts/cormorant-garamond-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 500 600;
  font-display: swap;
  src: url('/adrianojewelry/assets/fonts/cormorant-garamond-italic-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url('/adrianojewelry/assets/fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* -------------------------------------------------------------------------
     PALETTE — sampled from the VERVE board (#412a1a espresso · #846342 mocha ·
     #a68c6b tan · #d9c7a3 champagne · #efeae6 cream), tuned for a dark-luxe UI.
     The accent (champagne gold) stays scarce — ≤10% of any viewport.
     ------------------------------------------------------------------------- */

  /* Dark side — the espresso velvet */
  --bg: #170F0A;             /* page base — the warm velvet */
  --surface: #221811;        /* cards, panels, elevated surfaces */
  --surface-hover: #2E211A;  /* hover state of surfaces */
  --line: #3B2C21;           /* 1px borders ONLY — warm dark brown, never a fill */
  --placeholder: #1E150F;    /* IMG-SLOT placeholder panel — just off --surface */

  /* Accent — champagne gold (THE accent: CTAs, active states, kickers, rules) */
  --accent: #C9AC78;         /* champagne gold */
  --accent-bright: #E6D5AF;  /* hover/focus shimmer, gradient tips */
  --accent-ink: #785A36;     /* accent for LINKS on paper — AA-safe (≈5.3:1) on --paper */

  /* Light side — cream paper chapters */
  --paper: #EFE8DE;          /* light-chapter backgrounds */
  --ink: #241810;            /* primary text on paper */
  --ink-dim: #6B5540;        /* secondary text on paper (AA on paper) */

  /* Text on the dark side */
  --text: #F1EADF;           /* primary text on dark — warm ivory */
  --text-dim: #C4B49B;       /* secondary text on dark — AA-safe (≈8.9:1) on --bg */
  --text-faint: #8A7863;     /* DECORATIVE / metadata only — never must-read text */

  --danger: #A24B3A;         /* error underline / graphical indicator (≥3:1) */
  --danger-text: #D97563;    /* error TEXT on dark — AA-safe (≈4.6:1 on --bg) */

  /* RGB triplets for controlled alpha (glass, warmed borders, glow) */
  --bg-rgb: 23, 15, 10;
  --accent-rgb: 201, 172, 120;
  --mocha-rgb: 132, 99, 66;  /* board mocha #846342 — hero atmosphere glow */

  /* Composed surfaces */
  --glass: rgba(var(--bg-rgb), 0.72);       /* scrolled header (needs blur) */
  --glass-solid: #140D08;                   /* backdrop-filter fallback */
  --accent-soft: rgba(var(--accent-rgb), 0.40); /* card hover border warm */
  --focus-ring: rgba(var(--accent-rgb), 0.9);

  /* -------------------------------------------------------------------------
     TYPOGRAPHY — two faces only. Display = Cormorant (at scale, tight leading).
     Body/UI = Inter (≤1.125rem). Fluid scale on a 1.25 ratio, legible at 320px.
     ------------------------------------------------------------------------- */
  --font-display: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, 'SF Mono', 'Cascadia Mono', Menlo, Consolas, monospace;

  /* Fluid display steps (min, preferred, max) — H1 per §1.2 */
  --fs-display: clamp(2.75rem, 8vw, 7rem);       /* hero H1 */
  --fs-h1: clamp(2.5rem, 6vw, 4.5rem);           /* page H1 */
  --fs-h2: clamp(2rem, 4.5vw, 3.25rem);          /* section head */
  --fs-h3: clamp(1.5rem, 3vw, 2.125rem);         /* sub head */
  --fs-manifesto: clamp(1.75rem, 3.6vw, 2.25rem);/* oversized serif paragraph (28–36px) */
  --fs-lede: clamp(1.0625rem, 1.4vw, 1.25rem);   /* hero sub-line / lede */

  /* Body / UI */
  --fs-body: 1rem;
  --fs-body-lg: 1.125rem;                         /* body ceiling — never above */
  --fs-small: 0.875rem;
  --fs-kicker: clamp(0.6875rem, 0.66rem + 0.15vw, 0.75rem); /* 11–12px */

  /* Line-heights & tracking */
  --lh-display: 1.08;    /* headlines 1.05–1.15 */
  --lh-tight: 1.15;
  --lh-body: 1.7;
  --ls-kicker: 0.22em;   /* uppercase labels */
  --ls-caps: 0.16em;     /* wordmark / nav caps */
  --ls-display: -0.005em;
  --measure: 68ch;       /* body column 45–75ch */
  --measure-narrow: 60ch;

  /* -------------------------------------------------------------------------
     SPACE & LAYOUT — emptiness is a feature; the page inhales between sections.
     ------------------------------------------------------------------------- */
  --container: 1280px;
  --gutter: clamp(16px, 4vw, 48px);
  --section-y: clamp(96px, 14vh, 180px);         /* vertical section rhythm */
  --header-h: 68px;                              /* fixed header content height */

  /* Modular spacing scale */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs: 0.75rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2.5rem;
  --space-xl: 4rem;
  --space-2xl: 6rem;

  /* -------------------------------------------------------------------------
     BORDERS / SHAPE — near-sharp corners read as precise (radius 2px).
     No drop shadows as decoration anywhere in the system.
     ------------------------------------------------------------------------- */
  --radius: 2px;
  --border: 1px solid var(--line);

  /* -------------------------------------------------------------------------
     MOTION — physics of a heavy jewelry-box lid: smooth, weighted, brief.
     Everything entering uses --ease-out; loops use ease-in-out. Nothing bounces.
     ------------------------------------------------------------------------- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-micro: 220ms;    /* 150–250ms micro-interactions */
  --dur-card: 500ms;     /* card image-mask zoom */
  --dur-reveal: 700ms;   /* 600–800ms scroll reveals */
  --dur-hero: 1200ms;    /* hero choreography, once */

  /* -------------------------------------------------------------------------
     Z-INDEX — small, named, deliberate.
     ------------------------------------------------------------------------- */
  --z-header: 100;
  --z-nav: 200;
  --z-skip: 300;
}