/* ==========================================================================
   REZALOGY — brand.css
   Design tokens only. No layout, no components.
   Drop this file into any page and the variables below become available.

   Palette: warm dark stone + antique gold/brass, matched to the hero
   photograph (img/hero-kintsugi.svg) so the image's own background blends
   into the page instead of sitting in a box. Variable NAMES are unchanged
   from the previous chrome/red system on purpose — every component in
   site.css / article.css / legal.css keeps working without edits.

   Contrast: every value used for text is verified against WCAG 2.1 AA on the
   three background tokens. See brand-kit.md for the measured ratios.
   ========================================================================== */

:root {
  /* --- Ground -------------------------------------------------------- */
  --ink: #1B1917;          /* page background — matches the hero photo's own ground */
  --panel: #242019;        /* raised panel, alternating band              */
  --panel-2: #2E2820;      /* deepest card, input field, hover surface    */

  /* --- Text ---------------------------------------------------------- */
  --text: #EDE6D8;         /* body copy, headings          14.12:1 on ink */
  --text-dim: #C2B8A3;     /* secondary copy, intro          8.91:1 on ink */
  --text-muted: #9A907F;   /* labels, captions, meta         5.57:1 on ink */

  /* --- Chrome (now: antique gold / brass) ------------------------------ */
  /* Gradient stops. The darkest, --chrome-shadow, is 4.82:1 on ink, so
     chrome text clears AA everywhere along the gradient.                  */
  --chrome-white: #F6ECD8;
  --chrome-light: #E7CD90;
  --chrome-mid: #CBA46A;
  --chrome-steel: #B58C5E;
  --chrome-shadow: #A3813F;

  /* --- Gold accent (variable kept as --red for compatibility) ---------- */
  /* --red is text-safe on all three grounds (8.13:1 on ink).
     --red-deep is DECORATIVE ONLY — gradients, glows, borders.
     Never set it as a text colour.                                       */
  --red: #D9A94E;
  --red-deep: #A9782B;
  --red-glow: rgba(217, 169, 78, 0.28);

  /* --- Lines ---------------------------------------------------------- */
  --hairline: rgba(154, 144, 127, 0.22);
  --hairline-strong: rgba(203, 176, 133, 0.36);

  /* --- Chrome surfaces (gradients, no texture images) ------------------ */

  /* Brushed metal used for headline text via background-clip: text.
     Hard-ish stops read as reflections; soft stops read as plastic.       */
  --grad-chrome-text: linear-gradient(
    172deg,
    var(--chrome-white) 0%,
    var(--chrome-mid) 26%,
    var(--chrome-shadow) 43%,
    var(--chrome-light) 54%,
    var(--chrome-steel) 72%,
    var(--chrome-white) 100%
  );

  /* Horizontal variant for wide, short display lines. */
  --grad-chrome-text-h: linear-gradient(
    98deg,
    var(--chrome-steel) 0%,
    var(--chrome-white) 18%,
    var(--chrome-shadow) 38%,
    var(--chrome-light) 58%,
    var(--chrome-white) 82%,
    var(--chrome-steel) 100%
  );

  /* Metal plate for panels and cards. Bright edge is a separate layer. */
  --grad-plate: linear-gradient(
    158deg,
    #2A2419 0%,
    #17140F 34%,
    #221E16 52%,
    #14110C 74%,
    #1F1B14 100%
  );

  /* Polished bezel for buttons and pills. */
  --grad-bezel: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.22) 0%,
    rgba(255, 255, 255, 0.06) 22%,
    rgba(255, 255, 255, 0) 48%,
    rgba(154, 144, 127, 0.12) 78%,
    rgba(255, 255, 255, 0.15) 100%
  );

  /* Hairline that fades at both ends — used as a section rule. */
  --grad-rule: linear-gradient(
    90deg,
    transparent 0%,
    var(--hairline) 12%,
    var(--hairline-strong) 50%,
    var(--hairline) 88%,
    transparent 100%
  );

  /* Gold edge light. Decorative only. */
  --grad-red: linear-gradient(90deg, var(--red-deep) 0%, var(--red) 52%, #F0C97A 100%);

  /* --- Typography ------------------------------------------------------ */
  --font-display: "Instrument Serif", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --font-text: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  /* Fluid scale. Clamp keeps it readable from 320px to 1600px with no
     media queries and no JS.                                              */
  --step--1: clamp(0.82rem, 0.79rem + 0.14vw, 0.9rem);
  --step-0:  clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
  --step-1:  clamp(1.2rem, 1.12rem + 0.4vw, 1.45rem);
  --step-2:  clamp(1.5rem, 1.34rem + 0.8vw, 2.05rem);
  --step-3:  clamp(1.95rem, 1.62rem + 1.6vw, 3rem);
  --step-4:  clamp(2.5rem, 1.9rem + 3vw, 4.4rem);
  --step-5:  clamp(3rem, 2rem + 5vw, 6.5rem);

  --tracking-label: 0.22em;   /* uppercase labels                          */
  --tracking-display: -0.02em;

  /* --- Space ----------------------------------------------------------- */
  --s-1: 0.5rem;
  --s-2: 0.75rem;
  --s-3: 1rem;
  --s-4: 1.5rem;
  --s-5: 2rem;
  --s-6: 3rem;
  --s-7: 4.5rem;
  --s-8: 7rem;
  --section-y: clamp(4rem, 3rem + 6vw, 8.5rem);

  /* --- Structure -------------------------------------------------------- */
  --measure: 68ch;             /* max line length for body copy            */
  --container: 1200px;
  --container-narrow: 780px;
  --radius: 14px;
  --radius-sm: 8px;
  --radius-pill: 999px;

  --header-h: 68px;            /* also drives scroll-margin-top on headings */

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur: 260ms;
}