/* ==========================================================================
   TrueNorth Music Media
   tokens.css - the whole design system lives here.

   EDITORIAL BASE, CINEMATIC MOMENTS.
   A light bone page with near black ink, serif display type, and hard rules
   dividing every section. Dark cinematic bands interrupt it in a small number
   of places, and only where there is real photography to carry them.

   Change a value in this file and it changes everywhere on the site.
   ========================================================================== */

:root {
  /* ---- Surface ----------------------------------------------------------
     Bone is the dominant surface. Ink is the only dark, and it is used for
     type, rules, buttons, and the cinematic bands. There is no blue in this
     palette, by design. */
  --bone:       #FAF8F3;   /* primary page background */
  --bone-warm:  #F4F1E9;   /* very slightly recessed panel, used sparingly */
  --ink:        #12100C;   /* text, rules, dark bands, buttons */

  /* ---- Text -------------------------------------------------------------
     Contrast ratios are against --bone.
     AA needs 4.5:1 for body text and 3:1 for large text. */
  --text:       #12100C;   /* 17.5:1  primary */
  --mid:        #4A463E;   /*  8.9:1  secondary and body */
  --faint:      #6E6A60;   /*  5.2:1  captions and meta, still passes AA */

  /* ---- Accent -----------------------------------------------------------
     Rust is the only accent on the light page. It appears on eyebrow labels,
     one italic phrase per headline, and small numerals. It never fills a
     large area. If a section has more than two rust elements, remove one. */
  --rust:       #B4472C;   /*  5.1:1 on bone, passes AA for normal text */
  /* Full strength rust on ink is only 3.5:1, which fails for small text. The
     accountability band needs a lighter tint of the same hue to stay legible.
     Still rust, still the only accent. */
  --rust-light: #D9714F;   /*  5.8:1 on ink */

  /* ---- Rules ------------------------------------------------------------
     Two weights, and the difference is meaningful. Ink rules divide
     sections and major columns. Hairlines divide items within a section. */
  --rule:       #D8D2C4;
  --rule-ink:   1.5px solid var(--ink);
  --rule-hair:  1px solid var(--rule);

  /* ---- Inside the cinematic bands ---------------------------------------
     Amber is permitted here and nowhere else. These bands sit on ink, so
     the text tokens invert. */
  --band-bg:      #0B0A08;
  --band-text:    #F2EFE8;
  --band-faint:   #9A948A;   /* 6.0:1 on band-bg */

  /* ---- Dark type band ---------------------------------------------------
     Used once, for the accountability section. This is not a cinematic band:
     no photograph, no amber. It is the light page inverted, so the reader
     feels an interruption without spending one of the three image bands. */
  --dark-bg:   var(--ink);
  --dark-text: var(--bone);          /* 17.9:1 */
  --dark-mid:  rgba(250, 248, 243, 0.76);   /* 11:1 */
  --dark-rule: rgba(250, 248, 243, 0.22);
  --amber:        #C8873A;
  --amber-glow:   rgba(200, 135, 58, 0.30);

  /* ---- Type -------------------------------------------------------------
     Instrument Serif carries every headline. It ships a single weight, so
     hierarchy comes from size, italic, and space rather than bold, which
     suits the restraint this design is after.
     Inter carries body, labels, and navigation, and stays quiet. */
  --font-display: "Instrument Serif", Georgia, "Times New Roman", serif;
  --font-body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  /* Sizes are anchored at a 17px body rather than the 12 to 15px in the
     brief. The editorial proportions are unchanged; the whole scale simply
     starts somewhere a reader can use without leaning in. */
  --text-hero:    clamp(2.75rem, 1.55rem + 4.6vw, 4.75rem);  /* 44 to 76px */
  --text-display: clamp(2rem, 1.35rem + 2.5vw, 2.75rem);     /* 32 to 44px */
  --text-title:   clamp(1.3rem, 1.12rem + 0.7vw, 1.6rem);    /* 21 to 26px */
  --text-lead:    clamp(1.1rem, 1.03rem + 0.28vw, 1.25rem);  /* 18 to 20px */
  --text-body:    1.0625rem;                                  /* 17px */
  --text-small:   0.9375rem;                                  /* 15px */
  --text-label:   0.6875rem;                                  /* 11px eyebrow */
  --text-caption: 0.625rem;                                   /* 10px band caption */

  --leading-hero: 0.93;
  --leading-tight: 1.02;
  --leading-snug: 1.2;
  --leading-body: 1.65;

  --tracking-hero:  -0.025em;
  --tracking-tight: -0.018em;
  --tracking-label:  0.26em;   /* uppercase eyebrows */
  --tracking-caption: 0.16em;  /* inside cinematic bands */

  /* ---- Space ------------------------------------------------------------ */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs:  0.75rem;
  --space-s:   1rem;
  --space-m:   1.5rem;
  --space-l:   2.25rem;
  --space-xl:  3.25rem;
  --space-2xl: clamp(2.5rem, 5vw, 5rem);   /* section padding, per brief */

  --gutter:       clamp(1.25rem, 4vw, 2.5rem);
  --measure:      64ch;
  --width:        1200px;   /* max content width, per brief */

  /* ---- Motion -----------------------------------------------------------
     Restrained on purpose. Fade and rise, and nothing else moves. */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --reveal-duration: 700ms;
  --reveal-shift: 24px;
  --ui-duration: 260ms;
}

/* Users who ask for less motion get none of it. Reveals resolve to their
   final state immediately, counters print their final value, rules do not
   draw in, and nothing transitions. The scripts check this too. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --reveal-duration: 1ms;
    --reveal-shift: 0px;
    --ui-duration: 1ms;
  }
}