/* ============================================================
   The Brown Print — design tokens
   Loaded first by every page. The single source for colour,
   type, space, shape, motion and layers (docs/DESIGN-AUDIT.md §10).
   ============================================================ */
:root{
  /* ---- Colour: gold leads, red for drama ---- */
  --c-bg:#0A0908;          /* page */
  --c-surface:#13100F;     /* bands: stories, team, footer */
  --c-raised:#1A1614;      /* cards, inputs, dialogs, media placeholders */
  --c-text:#F6F3ED;        /* 17.9:1 */
  --c-text-2:#E8E2D6;      /* 15.4:1 */
  --c-muted:#A29E97;       /* 7.5:1 */
  --c-accent:#C6A667;      /* gold: eyebrows, accent word, active state, one primary button per view */
  --c-red:#DA1F1F;         /* large or graphic only — never small text */
  --c-line:rgba(246,243,237,.12);        /* decorative dividers */
  --c-line-strong:rgba(246,243,237,.40); /* control borders, >=3:1 */
  --c-error:#E05B5B;
  --c-scrim:rgba(10,9,8,.96);            /* dialog backgrounds */

  /* ---- Type ---- */
  --f-display:"Archivo Black","Arial Black",sans-serif;
  --f-voice:"Archivo",system-ui,sans-serif;
  --f-body:"Montserrat",system-ui,sans-serif;
  --fs-display:clamp(40px,13vw,186px);  /* "CONCERTS" is 6.1em wide: 13vw fits it at every width */
  --fs-xl:clamp(40px,6.6vw,95px);
  --fs-l:clamp(34px,5.2vw,76px);
  --fs-title:clamp(28px,4.2vw,61px);
  --fs-statement:clamp(26px,3.4vw,49px);
  --fs-h2:clamp(26px,3.2vw,44px);
  --fs-h4:clamp(20px,1.8vw,25px);
  --fs-script:clamp(20px,2.8vw,39px);
  --fs-lead:clamp(16px,1.3vw,19px);
  --fs-body:16px; --fs-small:14px;
  --fs-nav:13px;  --fs-label:12px;     /* 12 px is the floor for any text */
  --lh-display:.88; --lh-head:1; --lh-quote:1.2; --lh-body:1.7;
  --tr-display:-.005em; --tr-voice:-.02em; --tr-caps:.02em;
  --tr-label:.14em; --tr-nav:.12em; --tr-meta:.08em;

  /* ---- Space (4 px base) ---- */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px; --sp-6:32px;
  --sp-7:48px; --sp-8:64px; --sp-9:96px; --sp-10:128px; --sp-11:160px;
  --page-margin:clamp(20px,5vw,80px);
  --section:clamp(80px,10vw,144px);
  --section-lg:clamp(96px,13vw,192px);
  --head-gap:clamp(32px,4vw,56px);
  --list-gap:clamp(64px,9vw,128px);
  --grid-gap:clamp(12px,1.4vw,20px);
  --card-gap:clamp(20px,2.6vw,36px);

  /* ---- Layout ---- */
  --container:1360px;
  /* Left edge of .wrap content at any width: nav, topbars and footer use it. */
  --edge:max(var(--page-margin),calc((100% - var(--container)) / 2 + var(--page-margin)));
  --nav-h:76px;

  /* ---- Shape, depth, motion, layers ---- */
  --r-xs:4px; --r-md:8px; --r-lg:16px; --r-pill:999px;
  --shadow-float:0 24px 60px rgb(0 0 0/.5);
  --shadow-modal:0 60px 160px rgb(0 0 0/.7);
  --ease:cubic-bezier(.16,1,.3,1);
  --dur-fast:200ms; --dur-ui:350ms; --dur-reveal:800ms; --dur-media:1100ms;
  --z-nav:90; --z-menu:95; --z-dialog:100; --z-toast:120;
}