/* ============================================================
   DESIGN TOKENS — BENNY PAGE & DOKTOR
   Sampled directly from the Sydney show poster.
   Every section reads ONLY these variables.
   ============================================================ */

:root {
  /* --- Color: torn paper, ink, one red. Sampled from the poster. --- */
  --bg:            #e9e8e8;   /* torn-paper off-white — the poster ground */
  --bg-elevated:   #f5f4f4;   /* raised cards, pasted-on panels */
  --surface:       #dcdbda;   /* secondary blocks, inputs */
  --line:          #c9c7c5;   /* hairline borders */

  --text:          #0b0b0b;   /* ink — poster black */
  --text-muted:    #5a5856;   /* secondary text (7.2:1 on paper) */
  --text-faint:    #86837f;   /* captions, labels (3.6:1 — large or non-essential only) */

  /* ONE accent. The poster's bolt red, exactly. */
  --accent:        #ff3131;   /* 3.0:1 on paper — GRAPHICS + LARGE TYPE ONLY */
  --accent-deep:   #c81414;   /* 4.9:1 on paper — use for any red text under 24px */
  --accent-strong: #e01b1b;   /* hover state */
  --accent-ink:    #0b0b0b;   /* text ON accent — black passes (5.7:1), white does NOT */

  /* Poster texture grey — the halftone dot shadows */
  --halftone:      #a0a09f;

  /* Fixed ink, for surfaces that stay dark whatever the band (legal footers). */
  --ink:           #0b0b0b;

  /* --- Type ---
     The BENNY PAGE & DOKTOR lockup is real vector artwork
     (assets/poster/heading-lockup.svg), not a font. Archivo carries
     everything underneath it: heavy oblique caps for section heads,
     regular for body. */
  --font-display: "Archivo", "Archivo Black", Impact, system-ui, sans-serif;
  --font-body:    "Archivo", system-ui, -apple-system, sans-serif;

  --display-weight:  900;
  --display-style:   italic;
  --display-stretch: 112%;    /* Archivo variable width — matches the poster's set */

  /* Type scale (fluid, clamps between mobile and desktop) */
  --step--1: clamp(0.83rem, 0.79rem + 0.2vw, 0.94rem);
  --step-0:  clamp(1rem,    0.95rem + 0.25vw, 1.13rem);
  --step-1:  clamp(1.25rem, 1.15rem + 0.5vw,  1.6rem);
  --step-2:  clamp(1.56rem, 1.4rem  + 0.8vw,  2.25rem);
  --step-3:  clamp(1.95rem, 1.7rem  + 1.3vw,  3.2rem);
  --step-4:  clamp(2.44rem, 2.0rem  + 2.2vw,  4.5rem);
  --step-5:  clamp(3.05rem, 2.3rem  + 3.8vw,  6.5rem);

  --tracking-tight: -0.02em;   /* display headings */
  --tracking-wide:  0.14em;    /* eyebrows / labels, uppercase — poster sets these wide */
  --leading-tight:  0.94;      /* poster headlines are set very tight */
  --leading-body:   1.6;

  /* --- Space --- */
  --space-2xs: 0.5rem;
  --space-xs:  0.75rem;
  --space-sm:  1rem;
  --space-md:  1.5rem;
  --space-lg:  2.5rem;
  --space-xl:  4rem;
  --space-2xl: 6.5rem;
  --space-3xl: 10rem;

  /* --- Shape & depth ---
     Paper doesn't glow. Cut-outs cast a hard, slightly offset drop shadow,
     exactly like the pasted elements on the poster. */
  --radius-sm: 2px;
  --radius:    3px;
  --radius-lg: 4px;
  --radius-full: 999px;
  --shadow:        6px 8px 0 rgba(11,11,11,0.10);       /* pasted-paper offset */
  --shadow-cutout: 10px 14px 22px rgba(11,11,11,0.22);  /* figure contact shadow */
  --shadow-accent: 5px 6px 0 var(--accent);             /* the poster's red offset rule */

  /* --- Layout --- */
  --container: 1200px;
  --container-narrow: 760px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* Ink inversion — for the tickets band if we want contrast.
   Mirrors the [Black] logo lockup already in the folder. */
:root[data-theme="dark"],
[data-band="ink"] {
  --bg: #0b0b0b; --bg-elevated: #161616; --surface: #1f1f1f; --line: #2e2e2e;
  /* --text-faint was #6e6c6a, only 3.76:1 on ink — too low for the small print
     it carries (venue address, footer meta). #8f8d8a is 6.1:1. */
  --text: #f2f1f1; --text-muted: #a0a09f; --text-faint: #8f8d8a;
  --accent-deep: #ff3131;   /* on ink, the bright red is safe for text (5.7:1) */
  --accent-ink: #0b0b0b;
  --shadow: 6px 8px 0 rgba(0,0,0,0.4);
}