/* ==========================================================================
   DESIGN TOKENS — the single source of truth for the brand system.

   Warm editorial: charcoal ground, off-white type, rust for action and
   emphasis, muted gold for labels and quiet accents. Change the brand HERE,
   never in a component file.
   ========================================================================== */

:root {
  /* ---- Color: raw palette ------------------------------------------------
     Three charcoals, not one. The ground stays put; panels lift by a couple
     of percent so a card reads as a card without needing a border or a
     shadow. Anything lighter than --c-charcoal-3 stops looking like charcoal
     and starts looking like grey. */
  --c-charcoal:     #1A1917;   /* the ground — every page sits on this */
  --c-charcoal-2:   #211F1C;   /* raised: cards, panels, sticky nav when stuck */
  --c-charcoal-3:   #2A2723;   /* pressed / hover / table stripes */
  --c-field:        #131211;   /* inputs only, so they read as somewhere to type */

  --c-cream:        #F2EDE3;   /* off-white — primary text and light sections */
  --c-cream-70:     rgba(242, 237, 227, 0.70);
  --c-cream-50:     rgba(242, 237, 227, 0.50);
  --c-cream-30:     rgba(242, 237, 227, 0.30);
  --c-cream-14:     rgba(242, 237, 227, 0.14);
  --c-cream-08:     rgba(242, 237, 227, 0.08);

  --c-rust:         #B4512C;   /* action: buttons, links, the live nav state */
  --c-rust-bright:  #C75E36;   /* hover only — never a resting state */
  --c-rust-30:      rgba(180, 81, 44, 0.30);

  --c-gold:         #C6A059;   /* muted gold: labels, rules, small emphasis */
  --c-gold-40:      rgba(198, 160, 89, 0.40);
  --c-gold-16:      rgba(198, 160, 89, 0.16);

  /* ---- Color: semantic roles --------------------------------------------
     Components reference these, never the raw palette above. */
  --bg:             var(--c-charcoal);
  --bg-raised:      var(--c-charcoal-2);
  --bg-pressed:     var(--c-charcoal-3);
  --bg-field:       var(--c-field);
  --bg-invert:      var(--c-cream);        /* the off-white sections */

  --text:           var(--c-cream);
  --text-muted:     var(--c-cream-70);
  --text-faint:     var(--c-cream-50);
  --text-invert:    var(--c-charcoal);     /* type on an off-white section */

  --accent:         var(--c-rust);
  --accent-hover:   var(--c-rust-bright);
  --accent-quiet:   var(--c-gold);

  --ok:             #6E8F5E;
  --warn:           var(--c-gold);
  --danger:         #B4442C;

  /* ---- Rules: every divider in the system is exactly 1px ----------------- */
  --rule-width:        1px;
  --rule-color:        var(--c-cream-14);
  --rule-color-strong: var(--c-cream-30);
  --rule-color-gold:   var(--c-gold-40);
  --rule:              var(--rule-width) solid var(--rule-color);
  --rule-strong:       var(--rule-width) solid var(--rule-color-strong);
  --rule-gold:         var(--rule-width) solid var(--rule-color-gold);
  /* On an off-white section the charcoal rules have to invert too. */
  --rule-invert:       var(--rule-width) solid rgba(26, 25, 23, 0.16);

  /* ---- Type families -----------------------------------------------------
     Archivo carries the structure; Instrument Serif is the warm voice used
     for the hero line and pull quotes only; the mono is for labels and data. */
  --font-display: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-body:    "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-serif:   "Instrument Serif", Georgia, "Times New Roman", serif;
  --font-mono:    "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* ---- Type scale (fluid) ------------------------------------------------ */
  --fs-micro:   0.6875rem;                                    /* 11px labels */
  --fs-small:   0.8125rem;                                    /* 13px nav, meta */
  --fs-body:    clamp(0.9375rem, 0.88rem + 0.28vw, 1.0625rem);
  --fs-lead:    clamp(1.0625rem, 0.96rem + 0.52vw, 1.375rem);
  --fs-h3:      clamp(1.25rem, 1.10rem + 0.7vw, 1.625rem);
  --fs-h2:      clamp(1.875rem, 1.35rem + 2.3vw, 3.5rem);
  --fs-display: clamp(3rem, 1.10rem + 9.2vw, 11rem);          /* the name */

  /* ---- Type mechanics ----------------------------------------------------
     Every text style states its line height. Nothing inherits a browser
     default and nothing is left to chance. */
  --lh-display: 0.86;
  --lh-tight:   1.12;
  --lh-snug:    1.35;
  --lh-body:    1.68;
  --lh-mono:    1.5;
  --tr-display: -0.045em;
  --tr-tight:   -0.02em;
  --tr-label:   0.18em;
  --fw-regular: 400;
  --fw-medium:  500;
  --fw-bold:    700;
  --fw-black:   900;

  /* ---- Space scale (8pt base) -------------------------------------------- */
  --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;
  --sp-11: 12rem;

  /* ---- Structure ---------------------------------------------------------
     --nav-h is read by scroll-margin on every section, so an anchored jump
     never lands underneath the sticky bar. Change it in one place only. */
  --shell-max:  1520px;
  --gutter:     clamp(1.25rem, 0.6rem + 3.2vw, 4.5rem);
  --section-y:  clamp(4rem, 2rem + 8vw, 9rem);
  --nav-h:      64px;
  --measure:    62ch;

  /* ---- Motion ------------------------------------------------------------ */
  --ease:      cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast:  120ms;
  --dur-base:  240ms;
  --dur-slow:  560ms;

  /* ---- Elevation & misc --------------------------------------------------- */
  --radius:      2px;     /* just off square — warmer than the coffee system */
  --radius-md:   6px;     /* video tiles and cards */
  --radius-pill: 999px;
  --z-nav:       100;
  --z-overlay:   200;
  --grain-opacity: 0.035;
  /* The hatch inside an empty media tile. It has to be a token because the
     tile sits on charcoal in some sections and on off-white in others, and a
     cream hatch is invisible on cream. */
  --stripe: rgba(242, 237, 227, 0.05);
}

@media (min-width: 900px) {
  :root { --nav-h: 76px; }
}