/* ==========================================================================
   Rap & Rhapsody — design tokens
   Reference lock: Transform (transformfestival.org) primary; accent discipline
   from 12th Berlin Biennale; contact-sheet grid from Julia Krantz.
   Nothing in this file may be a literal value anywhere else in the CSS.
   ========================================================================== */

:root {
  /* --- Colour -----------------------------------------------------------
     ACCENT ROLE RULE: --lavender is for CTA outlines, labels, active states,
     section numerals and quote marks. It is never a large fill.
     --plum is the only large chromatic surface: full-bleed bands, plus the
     one spec card in 06 Why (.byq-surface--plum). */
  --ink:            #0B0A0D;   /* canvas — near-black with a faint violet cast */
  --ink-raised:     #141218;   /* raised surface, nav backdrop */
  --plum:           #241736;   /* immersive full-bleed band */
  --paper:          #F2F0EC;   /* light band */
  --lavender:       #B9A3FF;   /* accent on dark  (9.0:1 on --ink) */
  --lavender-ink:   #5B3CC4;   /* accent on paper (6.4:1 on --paper) */
  --ash:            #9A96A3;   /* secondary text on dark (6.8:1 on --ink) */
  --ash-ink:        #57535E;   /* secondary text on paper */
  --seam:           rgba(242, 240, 236, 0.14);  /* hairline borders, grid seams */
  --seam-ink:       rgba(11, 10, 13, 0.16);     /* hairline on paper */

  /* Per-band foreground assignments. Sections set these; components read them,
     so one component works on any band without knowing which band it is on. */
  --fg:             var(--paper);
  --fg-muted:       var(--ash);
  --fg-accent:      var(--lavender);
  --rule:           var(--seam);
  --bg:             var(--ink);

  /* --- Type --------------------------------------------------------------
     One family, two axes. Archivo's wdth axis does the work a second display
     face would normally do: 62% is a true compressed poster black, 100% is a
     workable text grotesk. */
  --font-sans: 'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Width axis via the standard font-stretch property rather than
     font-variation-settings: it maps to the same registered 'wdth' axis, but
     participates in font matching -- which is what lets a canvas measurement
     of a glyph provably match what SVG and HTML render. The BOX dive depends
     on that agreement. */
  --wdth-display: 62%;
  --wdth-heading: 75%;
  --wdth-text:    100%;
  --wdth-box:     125%;   /* the BOX glyphs only -- see .byq-box__glyphs */

  /* Fluid scale, 390px -> 1600px viewport */
  --step--1: clamp(0.80rem, 0.77rem + 0.13vw, 0.875rem);
  --step-0:  clamp(1.00rem, 0.95rem + 0.22vw, 1.125rem);
  --step-1:  clamp(1.25rem, 1.15rem + 0.45vw, 1.5rem);
  --step-2:  clamp(1.60rem, 1.36rem + 1.05vw, 2.25rem);
  --step-3:  clamp(2.10rem, 1.62rem + 2.10vw, 3.4rem);
  --step-4:  clamp(2.75rem, 1.80rem + 4.20vw, 5.2rem);
  --step-5:  clamp(3.50rem, 1.60rem + 8.40vw, 8.0rem);
  --display: clamp(4.00rem, 0.50rem + 15.5vw, 14rem);

  --lh-display: 0.88;
  --lh-heading: 1.04;
  --lh-text:    1.6;

  --tracking-display: -0.025em;
  --tracking-heading: -0.015em;
  --tracking-label:    0.16em;

  /* --- Space -------------------------------------------------------------
     8px base. Section rhythm is deliberately generous: the page is a slow
     cinematic scroll, not a dense product page. */
  --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;

  --gutter:       clamp(1.25rem, 4vw, 4rem);
  --section-pad:  clamp(4rem, 10vw, 10rem);
  --measure:      62ch;   /* prose line length */
  --container:    78rem;
  --container-wide: 96rem;

  /* --- Shape -------------------------------------------------------------
     Zero radius everywhere. This is load-bearing to the reference lock:
     Transform, Berlin Biennale and Julia Krantz are all sharp-cornered.
     The pill CTA is the single deliberate exception, borrowed from the
     Biennale's outlined secondary button. */
  --radius:       0;
  --radius-pill:  999px;
  --hairline:     1px;

  /* --- Motion ------------------------------------------------------------
     Scroll-scrubbed throughout: nothing runs on a timer, so the reader always
     controls the pace. These are for discrete UI transitions only. */
  --ease-out:  cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-in:   cubic-bezier(0.55, 0.06, 0.68, 0.19);
  --dur-fast:  180ms;
  --dur-mid:   320ms;
  --dur-slow:  620ms;

  --z-base:   0;
  --z-raised: 10;
  --z-nav:    100;
  --z-modal:  1000;
}

/* Light band: flip the foreground assignments, keep every component identical. */
.byq-band--paper {
  --bg:        var(--paper);
  --fg:        var(--ink);
  --fg-muted:  var(--ash-ink);
  --fg-accent: var(--lavender-ink);
  --rule:      var(--seam-ink);
}

.byq-band--plum {
  --bg:        var(--plum);
  --fg:        var(--paper);
  --fg-muted:  var(--ash);
  --fg-accent: var(--lavender);
  --rule:      var(--seam);
}

/* Plum surface: a block given the plum band's assignments inside a lighter
   band. Flat contrast is how something lifts off the page here -- no shadows. */
.byq-surface--plum {
  --bg:        var(--plum);
  --fg:        var(--paper);
  --fg-muted:  var(--ash);
  --fg-accent: var(--lavender);
  --rule:      var(--seam);
}