/* ==========================================================================
   KRESTA TEXTILE — Design tokens
   --------------------------------------------------------------------------
   Palette and type sampled directly from the client's reference video
   (assets/hero-main-page.mp4 — "The Cliffs"). Hex values below were measured
   off extracted frames, not estimated.

   ⚠ THIS SUPERSEDES THE BRAND DOCUMENT PALETTE (§9), ON CLIENT INSTRUCTION.
     §9 specifies black #0A0A0A dominant (70%), ivory 20%, signature green
     #1B5E20 as an 8% accent, silver 2%. The reference is instead a muted
     slate-green field with near-white type and no bright accent at all.
     The brand document should be updated to match, or this file will read
     as a mistake to whoever opens it next.

     Kresta's signature green survives in two places only: the logo artwork,
     and the deepest card tone below, which is pulled toward #1B5E20 rather
     than to neutral slate so the brand colour still underpins the system.
   ========================================================================== */

:root {
  /* --- Surfaces (measured from the reference) -------------------------- */

  --sage: #7c8f8a; /* page ground, visible around the inset cards */
  --sage-lit: #93a5a0;
  --sage-deep: #6b7d79;

  --bar: #2d413f; /* nav bar across the top of the hero card */
  --pill: #5c6c6a; /* pill button fill */
  --pill-lit: #6d7d7b;

  /* Card gradients. Every section is its own rounded card.
     --card-top measured #4A5E5C off the reference, darkened four points to
     #465957 so --text-2 clears 4.5:1 at the very top of the hero gradient
     (it was 4.42 at the measured value). Visually indistinguishable. */
  --card-top: #465957;
  --card-bot: #233533;

  /* Deeper variant, biased toward Kresta's #1B5E20 so the brand green is
     still doing structural work even though it never appears as an accent. */
  --card-deep-top: #2b4640;
  --card-deep-bot: #162b26;

  --panel: #405251; /* raised panel inside a card */

  /* --- Type colours ---------------------------------------------------- */

  --text: #f4fbfa; /* headings, near-white */
  --text-2: #c3d2d1; /* values, subtitles */
  --text-3: #a6bab6; /* body copy */
  /* Was #90A8A3, matching the reference exactly — but that measured 2.8:1
     on the lighter card and ~4.05:1 on the darker one, i.e. the reference
     itself is a shade under AA here. Lifted to clear 4.5:1. */
  --text-4: #9db3ae; /* eyebrows, spec keys, muted labels */

  /* Legacy aliases so existing rules keep resolving during the reskin. */
  --ink: var(--card-bot);
  --ivory: var(--text);
  --ivory-dim: var(--text-3);
  --silver: var(--text-2);
  --silver-dim: var(--text-4);
  --ink-raised: var(--panel);
  --ink-sunken: var(--card-deep-bot);

  /* Brand green — logo artwork only. Never a text or surface colour here. */
  --green: #1b5e20;

  /* --- Hairlines -------------------------------------------------------
     Light-on-dark at low alpha. On these mid-tone greens a solid silver
     rule reads far too loud.                                             */

  --hairline: rgba(244, 251, 250, 0.13);
  --hairline-strong: rgba(244, 251, 250, 0.26);

  /* --- ACCESSIBILITY ---------------------------------------------------
     Card grounds run #162B26–#465957. Every type colour above clears 4.5:1
     against the LIGHTEST surface it can actually land on, so text stays
     legible wherever it falls in a gradient.

     Two standing rules:
       · --text-4 is the floor. Do not darken it, and do not add a fifth,
         dimmer step.
       · No small muted text (--text-3 / --text-4) on --card-top, the
         lightest surface. That is why content sections use the deeper
         gradient and the hero carries only --text and --text-2.

     Full measured matrix: "design system/kresta-design-system.html".      */

  /* --- Typography ------------------------------------------------------
     Two families, matching the reference exactly.

     CORMORANT GARAMOND — display. High contrast with bracketed, slightly
     flared serifs and a calligraphic axis. This is what gives the
     reference its character; a didone (Bodoni) is geometrically flat by
     comparison and was visibly the wrong face. Set LIGHT and large, with
     wide tracking when in caps.

     DM SANS — everything else: nav, body, buttons, labels, and the spec
     tables. The reference sets spec keys as tracked sans caps, not mono,
     so IBM Plex Mono has been dropped entirely.

     DEVIATES FROM BRAND DOC §10 (Cabinet Grotesk everywhere), knowingly.  */

  --font-display: "Cormorant Garamond", "Times New Roman", serif;
  --font-ui: "DM Sans", "Helvetica Neue", Arial, sans-serif;
  --font-body: var(--font-ui);
  --font-mono: var(--font-ui); /* alias kept so old rules resolve */

  --w-caption: 300;
  --w-body: 400;
  --w-medium: 500;
  --w-heading: 500;
  --w-bold: 700;

  /* Fluid scale. The hero wordmark is deliberately enormous — in the
     reference it spans nearly the full card width. */
  --t-hero: clamp(2.6rem, 8.4vw, 8.5rem);
  --t-display: clamp(2.4rem, 5.2vw, 4.6rem);
  --t-h1: clamp(2rem, 4vw, 3.6rem);
  --t-h2: clamp(1.5rem, 2.6vw, 2.4rem);
  --t-h3: clamp(1.05rem, 1.5vw, 1.3rem);
  --t-body: clamp(0.9rem, 1vw, 1rem);
  --t-lead: clamp(1rem, 1.25vw, 1.15rem);
  --t-small: 0.8125rem;
  --t-micro: 0.6875rem;

  /* Tracking. The hero wordmark's extreme letter-spacing is the single
     most recognisable thing about the reference. */
  --track-hero: 0.3em;
  --track-brand: 0.34em;
  --track-eyebrow: 0.2em;
  --track-display: 0;
  --track-body: 0.005em;

  /* --- Space ----------------------------------------------------------- */

  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4rem;
  --s-9: 6rem;
  --s-10: 8rem;

  --section-y: clamp(4.5rem, 10vh, 8rem);

  /* --- Layout ---------------------------------------------------------
     --card-gap is the sage showing between stacked cards — kept.

     --frame WAS the sage margin around the outer edge of the whole page
     (top strip above the header, and left/right/bottom around the card
     stack). Set to 0: the client marked exactly this margin as unwanted in
     an annotated screenshot ("remove these sections... make full screen").
     Left as a variable rather than deleted, since header/hero/rail all
     still reference it structurally (sticky offsets, panel inset) even
     though it now resolves to nothing.                                   */

  --page-max: 88rem;
  --frame: 0rem;
  --card-gap: clamp(0.5rem, 1.1vw, 1rem);
  --page-pad: clamp(1.5rem, 4.5vw, 4.5rem);
  --gutter-x: var(--page-pad);
  --content-indent: 0rem;
  --measure: 58ch;

  /* --- Motion ---------------------------------------------------------- */

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 220ms;
  --dur-mid: 520ms;
  --dur-slow: 900ms;
  --dur-draw: 1400ms;

  /* --- Depth ----------------------------------------------------------- */

  --z-content: 2;
  --z-header: 60;
  --z-scrim: 70;
  --z-drawer: 80;

  /* Cards are softly rounded in the reference — not sharp, not pill. */
  --radius-card: 14px;
  --radius: 3px;
  --radius-pill: 999px;

  /* Rendered height of .header, measured (not estimated) at 1440/768/390px
     widths: 78.8 / 75.3 / 75.3px. Rounded up for safety margin. Used by
     .hero--video so a video hero starts clear of the fixed bar instead of
     running full-bleed underneath it — see css/layout.css. */
  --header-h: 80px;
}