/* Corbicula design tokens — the Ink & Gilt system, on copper.

   Transcribed from:
     design_handoff_corbicula_site/.../Corbicula Web - Ink and Gilt Spec.dc.html
     design_handoff_corbicula_site/.../Corbicula Landing Royal.html   (the build)

   "A deep forest-black ground carrying real gilt and ivory. […] the ground has
   a hue, so the gold sitting on it reads as metal rather than as yellow."

   The page now runs on two metals rather than one:

     Primary          #0D1510   the ground, everywhere
     Accent           #C25A2C   copper — where the eye is meant to go
     Typography       warm ivory / cream
     Premium accent   muted gold — the finish, never the instruction

   The division is not decorative, and it is the whole reason two accents can
   share a page. Copper is where the eye enters and where the hand goes: every
   eyebrow, every link and hover, the CTA, the basket, a lit pin and its row,
   the price, the scarcity badge, the ember at the centre of the breath. Gold
   is the finish: every hairline in the system, every numeral, the Latin and
   the two taglines, and the sheen that travels across the copper. Structure
   and ornament are gold; anything that opens a section or invites a hand is
   copper. The moment gold starts marking actions the page has three accents
   and none.

   Gold is also muted from the spec's #C9A227. Against a ground this dark a
   saturated gold and a saturated copper fight for the same attention; pulling
   the chroma out of the gold — same value, less shout — leaves copper as the
   only loud thing on the page, which is the point.

   Nothing outside this file may hardcode a colour, a size or an easing curve. */

:root {
  /* --- the two grounds --------------------------------------------------- */
  /* Ivory is not a third accent — it is a second ground. The page runs dark
     through hero, anatomy and the care, turns ivory for the five yields, and
     goes back to dark for the footer. One transition, at the point where
     reading becomes buying.

     #0D1510 is now the ground itself rather than the anatomy band, so the
     whole dark ramp steps down with it: the band, the footer and the raised
     faces keep the same intervals they had, measured from the new primary. */
  --forest: #0D1510;          /* primary ground */
  --forest-deep: #0A110D;     /* the anatomy band */
  --forest-foot: #080D0A;     /* the footer */
  --forest-panel: #111B15;    /* image beds, raised faces */
  --forest-raise: #0F1712;    /* the hero card — a lit face, not a bed */

  --ivory: #F4EFE2;           /* second ground, and type on dark */
  --ivory-card: #FBF8F0;      /* the product card face */
  --ivory-veil: rgba(251, 248, 240, 0.92);  /* the scarcity badge over a plate */
  --ivory-rule: #E2D8BF;      /* card border */
  --ivory-rule-in: #EAE1CC;   /* the rules inside a card */
  --ivory-rule-firm: #DCCFB0; /* the add-to-basket pill at rest */

  /* --- the accent: copper ------------------------------------------------- */
  /* #C25A2C is the brand value and it is kept exactly, but it lands at 4.2:1
     on the ground and 4.4:1 on the band — under the 4.5:1 floor PLAN.md §9
     calls non-negotiable. So the accent splits by job, the same way --sage did:
     --copper is for fills, marks, rules and borders, which carry no string;
     --copper-lit is the same hue lifted to 6:1 and is the only one allowed to
     be type on a dark ground. On ivory that inverts and --copper-ink (5.0:1)
     is the text value. */
  --copper: #C25A2C;          /* the accent — fills, pins, seams, borders */
  --copper-lit: #D97A45;      /* copper as type on dark */
  --copper-pale: #EDA073;     /* a hover at its peak */
  --copper-deep: #8E3C18;     /* a filled face under ivory type */
  --copper-ink: #A8481F;      /* copper as type on ivory */

  --copper-line: rgba(194, 90, 44, 0.30);   /* the season tile's border */
  --copper-line-soft: rgba(194, 90, 44, 0.22);
  --copper-rule: rgba(194, 90, 44, 0.55);   /* the underline that grows */
  --copper-veil: rgba(194, 90, 44, 0.12);   /* the basket button, hovered */
  --copper-wash: rgba(194, 90, 44, 0.10);   /* the lit legend row */
  --copper-cast: rgba(194, 90, 44, 0.30);   /* the CTA's shadow, and only that */
  --copper-pulse: rgba(194, 90, 44, 0.40);  /* a pin's ring, once every 4s */
  --copper-pulse-out: rgba(194, 90, 44, 0);

  /* --- the premium accent: muted gold ------------------------------------- */
  /* Gilt is never a large area and never a background for a paragraph: it is
     hairlines, numerals, five pins at rest, the sheen and two 2px seams. */
  --gilt: #BFA76A;
  --gilt-light: #D9C793;
  --gilt-pale: #EFE3BF;       /* the foil's highlight stop */
  --gilt-deep: #8A7742;       /* the foil's end stops */
  --gilt-mid: #A8925C;        /* one drifting mote */

  --hairline: rgba(191, 167, 106, 0.20);   /* the only structural line */
  --hairline-soft: rgba(191, 167, 106, 0.16);
  --hairline-firm: rgba(191, 167, 106, 0.26);
  --hairline-edge: rgba(191, 167, 106, 0.34);

  /* --- type on dark ------------------------------------------------------ */
  --cream-hi: var(--ivory);   /* headings */
  --cream: #F0EADA;           /* the wordmark, links, raised labels */
  --sage: #BFC6B4;            /* body copy */
  --sage-lit: #DCD6C4;        /* a legend term at rest */
  --sage-body: #A8AE9C;       /* legend copy */
  --sage-meta: #8A9382;       /* metadata, eyebrow labels */

  /* The spec's fourth step is #5F6A5C, which reads 3.1:1 on the ground and
     3.0:1 on a panel. PLAN.md §9 puts the floor for anything that carries
     information at 4.5:1 and calls it non-negotiable, so the faint rung is
     split in two: --sage-faint is the same hue lifted onto the right side of
     the floor (4.8:1 on a panel, 5.5:1 on the footer) and carries every real
     string — the specimen line, the process facts, the coordinates, the
     copyright. --sage-ornament keeps the design's value and is only ever
     allowed on hairlines and marks that say nothing. Both gain a little now
     that the ground has stepped down to #0D1510. */
  --sage-faint: #848E7B;
  --sage-ornament: #5F6A5C;

  /* --- type on ivory ----------------------------------------------------- */
  --ink: #16211A;             /* headings */
  --ink-body: #4A5449;        /* body copy */

  /* The spec lists #857F6E for metadata on ivory (3.5:1). It is lifted to sit
     above the floor on the ivory ground itself; the foil keeps its exact
     stops, because a gradient stop is not text. */
  --ink-meta: #6F6A5B;
  --gilt-ink: #7C6A33;        /* muted gold as text on ivory, 4.6:1 */

  /* Type on a metal face — the CTA's legend and a lit pin's numeral. Neither
     sits on a flat colour: one rides a scrolling gradient and the other a
     copper disc, and this is the value that clears 4.5:1 against the copper
     and holds 3.7:1 against the foil's darkest stop as it passes. */
  --ink-metal: #060B08;

  /* --- the foil ---------------------------------------------------------- */
  /* Scrolled by a 7-second linear loop at 300% width. Used in exactly four
     places: the primary CTA pill, the 30px rule beside the hero eyebrow, and
     the two 2px seams where the ground changes. A fifth would make the page
     gaudy.

     This is the one element where both metals are present at once — a copper
     bar with a gilt sheen travelling across it. Seven stops, not the spec's
     five: copper interpolated straight into pale gold passes through a flat
     peach, and the two #C79A5A shoulders are what make the crossing read as
     light on metal. The end stops are held at #A85228 rather than the true
     copper shadow, because the pill carries dark type and a deeper end would
     drop it under 3:1 as the loop scrolled past. */
  --foil: linear-gradient(100deg,
    #A85228 0%, #C25A2C 22%, #C79A5A 38%, #EFE3BF 48%,
    #C79A5A 58%, #C25A2C 76%, #A85228 100%);
  --foil-size: 300% 100%;

  /* --- the gilt breath ---------------------------------------------------- */
  /* A copper ember with a gilt falloff. The glow is the largest coloured area
     on the page and the only place the accent is allowed to be atmospheric
     rather than a mark — it is what stops a ground this dark reading as grey.
     Three sizes, because the three that use it sit at three different
     strengths and the animation owns `opacity`. */
  --breath-hero: radial-gradient(circle,
    rgba(194, 90, 44, 0.30) 0%, rgba(191, 167, 106, 0.13) 44%, rgba(191, 167, 106, 0) 72%);
  --breath-overture: radial-gradient(circle,
    rgba(194, 90, 44, 0.18) 0%, rgba(191, 167, 106, 0.08) 44%, rgba(191, 167, 106, 0) 72%);
  --breath-holding: radial-gradient(circle,
    rgba(194, 90, 44, 0.25) 0%, rgba(191, 167, 106, 0.11) 44%, rgba(191, 167, 106, 0) 72%);

  /* the cue under the overture's scroll line, and a mote's outer edge */
  --cue-bar: linear-gradient(180deg, rgba(217, 122, 69, 0.80), rgba(217, 122, 69, 0));
  --mote-out: rgba(244, 239, 226, 0);

  /* the light band that crosses an image plate once on hover */
  --plate-weave: repeating-linear-gradient(135deg,
    rgba(240, 234, 218, 0.05) 0 1px, transparent 1px 10px);
  --plate-weave-ivory: repeating-linear-gradient(135deg,
    rgba(22, 33, 26, 0.05) 0 1px, transparent 1px 10px);
  --plate-sweep: linear-gradient(105deg,
    transparent 38%, rgba(239, 227, 191, 0.16) 50%, transparent 62%);
  --plate-sweep-ivory: linear-gradient(105deg,
    transparent 38%, rgba(255, 255, 255, 0.55) 50%, transparent 62%);

  /* a pin's well, over a photograph; and the card's one shadow on ivory */
  --pin-well: rgba(10, 17, 13, 0.84);
  --card-cast: 0 24px 52px rgba(13, 21, 16, 0.16);

  /* the header, over whatever is scrolling under it */
  --header-veil: rgba(13, 21, 16, 0.90);

  /* --- type -------------------------------------------------------------- */
  --font-display: 'Cormorant Garamond', Georgia, serif;
  --font-ui: 'Karla', system-ui, -apple-system, sans-serif;
  --font-mono: 'Courier Prime', ui-monospace, Menlo, monospace;
  --font-ka: 'BPG Nino Mtavruli', Sylfaen, serif;

  /* Cormorant is high-contrast: on a dark ground its hairlines thin out, so
     never below 22px, and never at weight 300 under 40px. */
  --fs-hero: clamp(46px, 6.2vw, 102px);
  --fs-section: clamp(34px, 4.4vw, 66px);
  --fs-sub: clamp(26px, 2.7vw, 40px);
  --fs-term: 22px;
  --fs-quote: clamp(24px, 2.6vw, 36px);
  --fs-numeral: clamp(48px, 5.2vw, 82px);
  --fs-numeral-sm: 30px;

  --fs-body: clamp(15px, 1.15vw, 17.5px);
  --fs-body-sm: clamp(15px, 1.1vw, 17px);
  --fs-card: 14.5px;          /* never below 14px anywhere */
  --fs-legend: 14.5px;
  --fs-eyebrow: 12px;
  --fs-meta: 11px;
  --fs-micro: 10.5px;

  --lh-hero: 0.99;
  --lh-section: 1.04;
  --lh-sub: 1.13;
  --lh-quote: 1.3;
  --lh-body: 1.8;             /* line-height rises to 1.8 on dark */
  --lh-card: 1.74;

  --ls-hero: -0.018em;
  --ls-section: -0.012em;
  --ls-eyebrow: 0.22em;
  --ls-meta: 0.16em;
  --ls-micro: 0.14em;
  --ls-wordmark: 0.2em;
  --ls-ka: 0.1em;

  --measure: 36em;            /* body */
  --measure-head: 18em;       /* a section head */

  /* --- layout ------------------------------------------------------------ */
  --maxw: 1480px;
  --gutter: clamp(20px, 4vw, 54px);
  --section-y: clamp(72px, 11vh, 132px);
  --block-y: clamp(38px, 5vh, 60px);
  --rail-gap: clamp(18px, 1.8vw, 28px);

  /* --- motion ------------------------------------------------------------ */
  /* One curve, and durations long enough to read as breathing rather than as
     feedback. Nothing moves faster than 600ms — except the basket. */
  --ease: cubic-bezier(.16, .84, .24, 1);
  --dur-pin: 600ms;
  --dur-basket: 620ms;        /* the only fast thing */
  --dur-hover: 800ms;
  --dur-row: 700ms;
  --dur-rule: 900ms;
  --dur-card: 1000ms;
  --dur-reveal: 1150ms;
  --dur-sweep: 1600ms;
  --dur-sheen: 7s;
  --dur-breath: 16s;

  /* --- the gilt breath's ceiling ------------------------------------------ */
  /* The design exposes this as a 0–1 control; 0.6 is the shipped default, and
     the breath runs between 0.68 of it and it. */
  --sun: 0.6;

  /* --- added by the build, absent from the design ------------------------ */
  /* The focus ring was #E7CE8A, which is 1.3:1 on the ivory band — a ring
     nobody could see on the five cards, which are the only things on the page
     you tab through to buy. Copper is 4.2:1 on the dark ground and 3.8:1 on
     ivory: lower than the old ring on dark, far above the 3:1 non-text floor
     on both, and the first value that actually works on either ground. */
  --focus: var(--copper);
  --focus-width: 1px;
  --focus-offset: 2px;
  --tap-min: 44px;
}