/* ==========================================================================
   Opus AV — Design Tokens
   Single source of truth for colour, type, spacing, motion.
   Tokens come from Opus AV Brand Guidelines v1.1 (April 2026).
   Never hard-code these values elsewhere — always reference the variable.
   ========================================================================== */

:root {
  /* Brand colour --------------------------------------------------------- */
  --opus-orange:    #ED7B22;   /* Pantone 165 C — primary brand */
  --opus-grey:      #595959;   /* Pantone 446 C — body text on light */
  --opus-charcoal:  #1F1F1F;   /* dark surface, headlines */
  --opus-mist:      #F2F2F2;   /* light surface */
  --opus-teal:      #00A4B4;   /* sensory accent only */
  --opus-white:     #FFFFFF;

  /* Surface aliases (semantic) */
  --surface-default:   var(--opus-white);
  --surface-soft:      var(--opus-mist);
  --surface-dark:      var(--opus-charcoal);
  --text-default:      var(--opus-grey);
  --text-strong:       var(--opus-charcoal);
  --text-on-dark:      var(--opus-mist);
  --accent:            var(--opus-orange);
  --accent-sensory:    var(--opus-teal);

  /* Type ----------------------------------------------------------------- */
  --font-sans: "Helvetica Neue", "Helvetica", "Inter", "Arial", sans-serif;
  --fw-light:   300;
  --fw-regular: 400;
  --fw-medium:  500;
  --fw-bold:    700;

  /* Fluid type scale */
  --fs-display:  clamp(2.5rem, 5vw, 4.5rem);
  --fs-h1:       clamp(2rem, 3.5vw, 3rem);
  --fs-h2:       clamp(1.4rem, 2.2vw, 1.75rem);
  --fs-h3:       clamp(1.1rem, 1.6vw, 1.25rem);
  --fs-pull:     clamp(1.25rem, 2.4vw, 1.75rem);
  --fs-eyebrow:  0.75rem;
  --fs-body:     1rem;
  --fs-small:    0.9rem;
  --fs-caption:  0.85rem;

  /* Line heights */
  --lh-display: 1.05;
  --lh-h1:      1.2;
  --lh-h2:      1.25;
  --lh-body:    1.55;
  --lh-tight:   1.4;

  /* Tracking */
  --ls-display:  -0.02em;
  --ls-h1:       -0.015em;
  --ls-h2:       -0.01em;
  --ls-eyebrow:   0.15em;
  --ls-caption:   0.03em;

  /* Spacing — 8pt grid -------------------------------------------------- */
  --space-1: 0.5rem;   /*  8 */
  --space-2: 1rem;     /* 16 */
  --space-3: 1.5rem;   /* 24 */
  --space-4: 2rem;     /* 32 */
  --space-5: 3rem;     /* 48 */
  --space-6: 4rem;     /* 64 */
  --space-7: 6rem;     /* 96 */
  --space-8: 8rem;     /* 128 */

  /* Motion -------------------------------------------------------------- */
  --ease-opus:  cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in:    cubic-bezier(0.4, 0, 1, 1);
  --ease-out:   cubic-bezier(0, 0, 0.2, 1);
  --dur-fast:   200ms;
  --dur-base:   600ms;
  --dur-slow:   900ms;
  --dur-vlow:   1400ms;

  /* Layout -------------------------------------------------------------- */
  --container-max: 1280px;
  --container-pad: clamp(1.25rem, 4vw, 3rem);
  --header-h:      104px;

  /* Borders & radii ----------------------------------------------------- */
  --hairline:  1px solid rgba(89, 89, 89, 0.18);
  --hairline-dark: 1px solid rgba(255, 255, 255, 0.1);
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-pill: 999px;

  /* Shadows (used sparingly) ------------------------------------------- */
  --shadow-soft:  0 1px 2px rgba(31, 31, 31, 0.04), 0 4px 16px rgba(31, 31, 31, 0.06);
  --shadow-lift:  0 8px 28px rgba(31, 31, 31, 0.12);

  /* Z-index ------------------------------------------------------------- */
  --z-base:    1;
  --z-overlay: 50;
  --z-header: 100;
  --z-modal:  500;
}