/* Ink Obsessions, black and gold demo: design tokens.
   One source of truth for both pages. Three layers:
   primitives (raw values) -> semantic (what a value is for) -> component (what a part uses).
   Components read semantic or component tokens only, never primitives or raw hex. */
:root{
  /* ---------- primitives: color ---------- */
  --onyx-990:#070605;
  --onyx-950:#0a0907;
  --onyx-920:#0e0c0a;
  --onyx-900:#12100d;
  --onyx-860:#17140f;
  --onyx-800:#1f1b15;
  --onyx-700:#2b261d;
  --ivory-50:#f4ede0;
  --stone-300:#bdb29d;
  --stone-400:#9d927e;
  --gold-100:#f7e8bd;
  --gold-200:#ecd394;
  --gold-300:#dcb865;
  --gold-400:#c9a14a;
  --gold-600:#a88437;
  --gold-800:#6b5424;
  /* channel triplets, for tints: rgb(var(--gold-rgb) / .2) */
  --gold-rgb:220 184 101;
  --champagne-rgb:236 211 148;
  --canvas-rgb:10 9 7;
  --panel-rgb:23 20 15;
  --shade-rgb:4 3 2;
  --stone-rgb:189 178 157;

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

  /* ---------- primitives: space (4px base) ---------- */
  --space-1:.25rem;--space-2:.5rem;--space-3:.75rem;--space-4:1rem;--space-5:1.5rem;
  --space-6:2rem;--space-7:2.75rem;--space-8:3.5rem;--space-9:5rem;--space-10:7rem;

  /* ---------- semantic: surfaces and ink ---------- */
  --canvas:var(--onyx-950);
  --canvas-deep:var(--onyx-990);
  --panel:var(--onyx-860);
  --surface-raised:var(--onyx-800);
  --surface-sunken:var(--onyx-920);
  --text-primary:var(--ivory-50);
  --text-secondary:var(--stone-300);
  --text-muted:var(--stone-400);
  --accent:var(--gold-300);
  --accent-hover:var(--gold-200);
  --accent-deep:var(--gold-600);
  --accent-muted:rgb(var(--gold-rgb) / .16);
  --champagne:var(--gold-200);
  --on-accent:var(--onyx-990);
  /* legacy names still read by older rules; they now resolve into the gold family */
  --orchid:var(--gold-200);
  --orchid-muted:rgb(var(--champagne-rgb) / .22);
  --line:rgb(var(--gold-rgb) / .13);
  --line-strong:rgb(var(--gold-rgb) / .34);
  --line-gold:rgb(var(--gold-rgb) / .55);
  --focus-ring:var(--gold-300);

  /* the metal: brushed gold for the wordmark, key headings and primary buttons only */
  --gold-metal:linear-gradient(118deg,var(--gold-600) 0%,var(--gold-200) 26%,var(--gold-400) 50%,var(--gold-100) 72%,var(--gold-600) 100%);
  --gold-metal-soft:linear-gradient(118deg,var(--gold-400) 0%,var(--gold-100) 45%,var(--gold-300) 100%);
  --gold-hairline:linear-gradient(90deg,rgb(var(--gold-rgb) / 0),rgb(var(--gold-rgb) / .6) 50%,rgb(var(--gold-rgb) / 0));

  /* ---------- semantic: type ---------- */
  --display:var(--font-display);
  --body:var(--font-sans);
  --label:var(--font-sans);
  --fs-eyebrow:.78rem;
  --fs-label:.75rem;
  --fs-body:clamp(15.5px,1.05vw,17px);
  --fs-h2:clamp(2.35rem,4.4vw,3.7rem);
  --fs-h3:clamp(1.5rem,1.9vw,1.75rem);
  --track-eyebrow:.32em;
  --track-label:.18em;
  --track-display:-.01em;
  --track-wordmark:.16em;

  /* ---------- semantic: shape and depth ---------- */
  --radius-sm:2px;
  --radius-md:4px;
  --radius-lg:6px;
  --radius-pill:999px;
  --shadow-card:0 1px 0 rgb(var(--gold-rgb) / .06) inset,0 20px 50px rgb(var(--shade-rgb) / .45);
  --shadow-lift:0 24px 60px rgb(var(--shade-rgb) / .6),0 0 0 1px rgb(var(--gold-rgb) / .35),0 0 44px rgb(var(--gold-rgb) / .12);
  --shadow-cta:0 10px 30px rgb(var(--gold-rgb) / .28),0 1px 0 rgb(255 255 255 / .35) inset;
  --glow-gold:0 0 22px rgb(var(--gold-rgb) / .45);
  --tshadow:0 1px 2px rgb(var(--shade-rgb) / .95),0 3px 12px rgb(var(--shade-rgb) / .8),0 10px 44px rgb(var(--shade-rgb) / .8);
  --section-y:clamp(5.5rem,12vh,9.5rem);
  --gutter:clamp(1.2rem,6vw,5rem);

  /* ---------- semantic: motion ---------- */
  --ease:cubic-bezier(.22,.9,.24,1);
  --ease-soft:cubic-bezier(.4,.05,.2,1);
  --dur-fast:.3s;
  --dur-med:.5s;
  --dur-slow:1.1s;

  /* ---------- component tokens ---------- */
  --btn-bg:var(--gold-metal);
  --btn-fg:var(--on-accent);
  --btn-radius:var(--radius-sm);
  --card-bg:linear-gradient(180deg,var(--onyx-860),var(--onyx-900));
  --card-border:var(--line);
  --card-radius:var(--radius-md);
  --input-bg:var(--surface-sunken);
  --input-border:rgb(var(--stone-rgb) / .5);
  --chip-border:rgb(var(--gold-rgb) / .62);
  --pad-bg:radial-gradient(ellipse 80% 70% at 50% 40%,var(--onyx-900),var(--onyx-990));
  --pad-guide:rgb(var(--champagne-rgb) / .42);
  --pad-ideal:rgb(var(--champagne-rgb) / .55);
  --pad-ink-a:var(--gold-400);
  --pad-ink-b:var(--gold-100);
  --pad-glow:rgb(var(--gold-rgb) / .65);
  /* one warm grade for every photo and clip, so red and purple set lighting reads as amber */
  --media-grade:sepia(.55) saturate(.9) contrast(1.06) brightness(.95);
}