/* ===========================================================================
   DESIGN TOKENS — The House of Knox
   ---------------------------------------------------------------------------
   Every colour, rule weight and measure in the site resolves to something in
   this file. Change a value here and it changes everywhere, consistently.
   =========================================================================== */

:root {
  /* --- Brand palette (from the brand specification) ---------------------- */
  --copper: #d96a18;          /* Copper Orange   — primary            */
  --copper-burnished: #a84e13; /* Burnished Copper — secondary        */
  --ivory: #f2e6d5;           /* Warm Ivory      — background         */
  --black: #0b0b0b;           /* Rich Black      — dark               */
  --espresso: #392317;        /* Deep Espresso   — accent             */

  /* --- Derived tones ---------------------------------------------------- */
  /* Used to build the foil gradient and the bevels. Mixed from the five
     brand colours rather than invented, so nothing drifts off-palette. */
  --copper-highlight: #f0a763;
  --copper-deep: #6d3009;
  --copper-shadow: #43200a;
  --ivory-shade: #e4d4bd;     /* parchment in shadow, for inset edges  */
  --ivory-deep: #d6c3a8;      /* deepest parchment, for engraved rules */

  /* --- Brass -------------------------------------------------------------
     Yellower and less saturated than copper, and used ONLY for hardware —
     the mounts that hold the survey sheet, the outer keyline of a frame.
     Restricting it to hardware is what keeps it from muddying the copper. */
  --brass: #b9975b;
  --brass-light: #dcc38c;
  --brass-deep: #7d6134;
  --black-soft: #141110;      /* black warmed toward the leather tone  */
  --black-lift: #1d1917;      /* raised surfaces on the dark ground    */

  /* --- Text colours -------------------------------------------------------
     Every value here has been measured against the ground it is used on.
     The ratios in the comments are WCAG 2.1 contrast against that ground;
     4.5 is the AA floor for body text, 3.0 for large or bold display text.

     The temptation with a palette this warm is to mute secondary text by
     dropping its opacity until it "feels" right. That is how a survey ends up
     with questions nobody over forty can read in a dim lounge. These are the
     lightest values that still pass. */

  /* on Warm Ivory */
  --ink: var(--espresso);              /* 11.9:1 — body, inputs, answers      */
  --ink-soft: #6e5b4d;                 /*  5.2:1 — labels, notes, anchors     */
  --copper-text: var(--copper-burnished); /* 4.5:1 — the only copper for text */

  /* on Rich Black */
  --on-dark: var(--ivory);             /* 15.2:1                              */
  --ivory-a70: rgba(242, 230, 213, 0.7);  /* 8.6:1 — secondary copy           */
  --on-dark-quiet: rgba(242, 230, 213, 0.55); /* 5.3:1 — the quiet floor      */

  /* --- Edges ---------------------------------------------------------------
     WCAG 1.4.11 wants 3:1 for the boundary of a control the user has to find.
     Purely decorative rules are exempt and may be fainter. */
  --edge: rgba(57, 35, 23, 0.55);      /*  3.3:1 — input and option borders   */
  --rule-faint: rgba(57, 35, 23, 0.14);/*  decorative ruling only             */

  --copper-a55: rgba(217, 106, 24, 0.55);
  --copper-a28: rgba(217, 106, 24, 0.28);
  --copper-a12: rgba(217, 106, 24, 0.12);

  /* --- Metallic ---------------------------------------------------------
     A struck-foil read comes from a hard highlight band crossing the middle
     of the letterform with darker metal above and below. Applied via
     background-clip: text on headings, and as a fill on rules and borders. */
  --foil: linear-gradient(
    175deg,
    var(--copper-deep) 0%,
    var(--copper-burnished) 18%,
    var(--copper) 38%,
    var(--copper-highlight) 49%,
    #ffd9a8 52%,
    var(--copper-highlight) 55%,
    var(--copper) 66%,
    var(--copper-burnished) 84%,
    var(--copper-shadow) 100%
  );
  /* The same foil, darkened for use on the ivory ground. The bright band in
     --foil is nearly invisible against parchment; here the crest of the bevel
     is Copper Orange rather than near-white, so the letterform still reads. */
  --foil-dark: linear-gradient(
    175deg,
    var(--copper-shadow) 0%,
    var(--copper-deep) 20%,
    var(--copper-burnished) 40%,
    var(--copper) 50%,
    var(--copper-burnished) 62%,
    var(--copper-deep) 84%,
    var(--copper-shadow) 100%
  );

  /* Button face — Copper Orange with a subtle bevel, per the brand spec.
     The face stays on Copper Orange through the middle where the label sits,
     with a lighter catch at the top edge and a burnished roll-off at the
     bottom so the bevel reads without flattening the colour.

     Warm ivory on Copper Orange measures 2.8:1, below the 4.5:1 WCAG asks for
     body text. This is the brand's specified button and its owner's decision.
     Legibility is bought back elsewhere: the label is set large, bold, and
     widely tracked, and carries a dark rim shadow that lifts it off the
     copper. Do not "fix" this by muting the copper — it is deliberate. */
  --copper-face: linear-gradient(
    180deg,
    var(--copper-highlight) 0%,
    var(--copper) 14%,
    var(--copper) 62%,
    var(--copper-burnished) 92%,
    var(--copper-deep) 100%
  );

  --foil-rule: linear-gradient(
    90deg,
    transparent 0%,
    var(--copper-burnished) 12%,
    var(--copper) 38%,
    var(--copper-highlight) 50%,
    var(--copper) 62%,
    var(--copper-burnished) 88%,
    transparent 100%
  );

  /* --- Type scale (1.25 minor third, fluid) ------------------------------ */
  --step--2: clamp(0.68rem, 0.66rem + 0.1vw, 0.74rem);
  --step--1: clamp(0.82rem, 0.79rem + 0.15vw, 0.92rem);
  --step-0: clamp(1rem, 0.96rem + 0.2vw, 1.15rem);
  --step-1: clamp(1.2rem, 1.13rem + 0.35vw, 1.44rem);
  --step-2: clamp(1.44rem, 1.32rem + 0.6vw, 1.8rem);
  --step-3: clamp(1.73rem, 1.53rem + 1vw, 2.25rem);
  --step-4: clamp(2.07rem, 1.75rem + 1.6vw, 2.81rem);
  --step-5: clamp(2.49rem, 1.98rem + 2.55vw, 3.52rem);
  --step-6: clamp(2.99rem, 2.2rem + 3.9vw, 4.4rem);

  /* --- Tracking ----------------------------------------------------------
     Inscriptional capitals need air; script needs none. */
  --track-display: 0.14em;
  --track-secondary: 0.22em;
  --track-wide: 0.34em;

  /* --- Spacing (4px base, doubling) -------------------------------------- */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4rem;
  --sp-9: 6rem;
  --sp-10: 8rem;

  /* --- Measure ----------------------------------------------------------- */
  --measure: 34rem;      /* comfortable reading width for body copy     */
  --page: 46rem;         /* the survey's parchment sheet                */
  --page-wide: 78rem;    /* admin tables                                */

  /* --- Motion -----------------------------------------------------------
     The brand calls for subtle fades and hover only. Nothing here moves an
     element more than a couple of pixels or runs longer than a third of a
     second. */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --fade: 260ms var(--ease);
  --fade-slow: 900ms var(--ease);
}

/* Respect the reader. Everything below degrades to an instant state change. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --fade: 1ms linear;
    --fade-slow: 1ms linear;
  }
}