/* 3D Muscle Lab — design tokens (v1.1, 24 Sept 2026) */
:root {
  /* Brand colors */
  --color-midnight: #0E0E0F;
  --color-graphite: #38383F;
  --color-hazard: #E16526;
  --color-hazard-deep: #B94C17;        /* all small orange text: kickers, inline links, labels, fig numbers (5.1:1 on white) */
  --color-golden: #F7AD1A;
  --color-lime: #99D139;
  --color-stockholm: #D3D3D3;
  --color-white: #FFFFFF;
  --color-offwhite: #F9F9F9;

  /* Roles */
  --color-text: var(--color-graphite);
  --color-text-muted: #5C5C64;         /* secondary text on light (6.6:1 on white, 6.3:1 on off-white) */
  --color-text-on-dark: #FFFFFF;
  --color-text-on-dark-muted: rgba(255,255,255,.9);   /* secondary text on Graphite/Midnight: never below 90% white or 16px */
  --color-heading-on-gold: var(--color-midnight);
  --color-action: var(--color-hazard);       /* buttons (white text, bold ≥19px), step tiles, display text */
  --color-link: var(--color-hazard-deep);
  --color-kicker: var(--color-hazard-deep);
  --color-kicker-on-dark: var(--color-golden);
  --color-action-hover: #C4531C;
  --color-accent-on-dark: var(--color-lime);
  --color-border: var(--color-stockholm);
  --color-border-strong: #B9B9BE;
  --color-focus: #1B6FD8;              /* focus ring — visible on every background */
  --color-bg: var(--color-white);
  --color-bg-alt: var(--color-offwhite);
  --color-bg-feature: var(--color-golden);
  --color-bg-dark: var(--color-midnight);      /* closing CTA, footer ONLY; mid-page dark = white cards on Midnight */
  --color-bg-hero: var(--color-graphite);      /* default hero, with grid texture. Header is White. */
  --color-surface-on-dark: rgba(255,255,255,.05);
  --color-surface-on-dark-hover: rgba(255,255,255,.09);

  /* Signature texture on Graphite / Midnight sections: gold muscle fibres fanning in toward a tendon
     (David, 25 Sept 2026; replaced the 48 px grid). Phones get a sparser version that fades out behind the text. */
  --grid-texture: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 700' preserveAspectRatio='xMidYMid slice'><g fill='none' stroke='%23F7AD1A' stroke-opacity='0.12' stroke-width='1.2'><path d='M-40 -120 C520 -105, 1050 151, 1640 245'/><path d='M-40 -92 C520 -81, 1050 158, 1640 250'/><path d='M-40 -64 C520 -56, 1050 165, 1640 255'/><path d='M-40 -36 C520 -32, 1050 172, 1640 260'/><path d='M-40 -8 C520 -7, 1050 179, 1640 265'/><path d='M-40 20 C520 18, 1050 186, 1640 270'/><path d='M-40 48 C520 42, 1050 193, 1640 275'/><path d='M-40 76 C520 67, 1050 200, 1640 280'/><path d='M-40 104 C520 91, 1050 207, 1640 285'/><path d='M-40 132 C520 116, 1050 214, 1640 290'/><path d='M-40 160 C520 140, 1050 221, 1640 295'/><path d='M-40 188 C520 165, 1050 228, 1640 300'/><path d='M-40 216 C520 189, 1050 235, 1640 305'/><path d='M-40 244 C520 214, 1050 242, 1640 310'/><path d='M-40 272 C520 238, 1050 249, 1640 315'/><path d='M-40 300 C520 263, 1050 256, 1640 320'/><path d='M-40 328 C520 288, 1050 263, 1640 325'/><path d='M-40 356 C520 312, 1050 270, 1640 330'/><path d='M-40 384 C520 337, 1050 277, 1640 335'/><path d='M-40 412 C520 361, 1050 284, 1640 340'/><path d='M-40 440 C520 386, 1050 291, 1640 345'/><path d='M-40 468 C520 410, 1050 298, 1640 350'/><path d='M-40 496 C520 435, 1050 305, 1640 355'/><path d='M-40 524 C520 459, 1050 312, 1640 360'/><path d='M-40 552 C520 484, 1050 319, 1640 365'/><path d='M-40 580 C520 508, 1050 326, 1640 370'/><path d='M-40 608 C520 533, 1050 333, 1640 375'/><path d='M-40 636 C520 558, 1050 340, 1640 380'/><path d='M-40 664 C520 582, 1050 347, 1640 385'/><path d='M-40 692 C520 607, 1050 354, 1640 390'/><path d='M-40 720 C520 631, 1050 361, 1640 395'/><path d='M-40 748 C520 656, 1050 368, 1640 400'/><path d='M-40 776 C520 680, 1050 375, 1640 405'/><path d='M-40 804 C520 705, 1050 382, 1640 410'/></g></svg>");
  --grid-size: cover;

  /* Type */
  --font-heading: "Titillium Web", "Segoe UI", system-ui, sans-serif;
  --font-body: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif;

  /* Fluid type scale: mobile → desktop (360px → 1280px) */
  --text-xs: 0.75rem;                                   /* 12 — captions minimum */
  --text-sm: 0.875rem;                                  /* 14 — meta, table labels */
  --text-base: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);  /* 16 → 18 body */
  --text-lg: clamp(1.125rem, 1.05rem + 0.35vw, 1.375rem);/* 18 → 22 lead */
  --text-h4: clamp(1.125rem, 1.05rem + 0.35vw, 1.375rem);/* 18 → 22 */
  --text-h3: clamp(1.375rem, 1.25rem + 0.6vw, 1.75rem);  /* 22 → 28 */
  --text-h2: clamp(1.75rem, 1.5rem + 1.1vw, 2.5rem);     /* 28 → 40 */
  --text-h1: clamp(2.25rem, 1.8rem + 2.2vw, 3.75rem);    /* 36 → 60 */
  --text-display: clamp(2.75rem, 2rem + 3.5vw, 5rem);    /* 44 → 80 homepage/stat numbers */
  --text-kicker: 1rem;                                   /* 16, uppercase, tracked .08em — never smaller */

  --leading-tight: 1.05;
  --leading-heading: 1.15;
  --leading-body: 1.65;
  --tracking-kicker: 0.08em;
  --weight-heading: 700;
  --weight-body: 400;
  --weight-bold: 700;

  --measure: 70ch;          /* article reading width */
  --measure-wide: 920px;    /* breakout figures / tables */
  --container: 1200px;
  --container-narrow: 760px;

  /* Spacing — multiples of 6/12 */
  --space-6: 6px;
  --space-12: 12px;
  --space-18: 18px;
  --space-24: 24px;
  --space-36: 36px;
  --space-48: 48px;
  --space-60: 60px;
  --space-72: 72px;
  --space-96: 96px;
  --space-120: 120px;
  --section-y: clamp(44px, 2vw + 36px, 60px);   /* one spacing for every band and hero on every page: 60px desktop, 44px phones (David, 25 Sept) */
  --gutter: clamp(18px, 4vw, 48px);

  /* Radii — clinical, not bubbly */
  --radius-sm: 3px;
  --radius-md: 6px;
  --radius-lg: 10px;
  --radius-pill: 999px;

  /* Borders */
  --border-hair: 1px solid var(--color-border);
  --border-callout-light: 4px solid var(--color-hazard);
  --border-callout-key: 6px solid var(--color-golden);   /* white card + shadow-md, on Off-white */
  --border-cta-top: 6px solid var(--color-golden);       /* end-of-article CTA panel */
  --border-callout-inverted: 2px solid var(--color-golden);

  /* Shadow — ONE value site-wide (315°, distance 6, blur 12, black 40%). Cards-as-objects only; never on Golden Dawn or Midnight surfaces. */
  --shadow: 4px 4px 12px rgba(0,0,0,.4);

  /* Controls */
  --tap-min: 44px;
  --focus-ring: 0 0 0 3px var(--color-white), 0 0 0 6px var(--color-focus);
  --transition: 150ms ease;
}

@media (max-width: 760px) {
  :root { --grid-texture: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 700' preserveAspectRatio='xMidYMid slice'><defs><linearGradient id='f' x1='0' y1='0' x2='0' y2='1'><stop offset='0' stop-color='%23F7AD1A' stop-opacity='.03'/><stop offset='.55' stop-color='%23F7AD1A' stop-opacity='.05'/><stop offset='1' stop-color='%23F7AD1A' stop-opacity='0.1'/></linearGradient></defs><g fill='none' stroke='url(%23f)' stroke-width='1.2'><path d='M-40 -120 C520 -105, 1050 151, 1640 245'/><path d='M-40 -64 C520 -56, 1050 165, 1640 255'/><path d='M-40 -8 C520 -7, 1050 179, 1640 265'/><path d='M-40 48 C520 42, 1050 193, 1640 275'/><path d='M-40 104 C520 91, 1050 207, 1640 285'/><path d='M-40 160 C520 140, 1050 221, 1640 295'/><path d='M-40 216 C520 189, 1050 235, 1640 305'/><path d='M-40 272 C520 238, 1050 249, 1640 315'/><path d='M-40 328 C520 288, 1050 263, 1640 325'/><path d='M-40 384 C520 337, 1050 277, 1640 335'/><path d='M-40 440 C520 386, 1050 291, 1640 345'/><path d='M-40 496 C520 435, 1050 305, 1640 355'/><path d='M-40 552 C520 484, 1050 319, 1640 365'/><path d='M-40 608 C520 533, 1050 333, 1640 375'/><path d='M-40 664 C520 582, 1050 347, 1640 385'/><path d='M-40 720 C520 631, 1050 361, 1640 395'/><path d='M-40 776 C520 680, 1050 375, 1640 405'/></g></svg>"); }
}