/* ==========================================================================
   MCP | Media | Cinema | Projection
   Design Tokens
   All visual values live here. Nothing is hardcoded elsewhere.
   Fonts: Syne (headings) + Inter (body).
   ========================================================================== */

:root {

  /* Colour — base palette */
  --color-base:          #111111;   /* deep charcoal — page background */
  --color-surface:       #1A1A1A;   /* lifted surface — cards, strips */
  --color-surface-mid:   #242424;   /* card hover, borders */
  --color-surface-high:  #2E2E2E;   /* active states, top borders */

  /* Colour — accent */
  --color-accent:        #C8831A;   /* warm amber — projector-light highlight */
  --color-accent-muted:  #8A5A12;   /* subdued amber — status badges, secondary */
  --color-accent-subtle: rgba(200, 131, 26, 0.12); /* very faint amber tint */

  /* Colour — text */
  --color-text-primary:   #F0EDE8;  /* off-white — body text */
  --color-text-secondary: #A8A49E;  /* mid-grey — supporting copy */
  --color-text-muted:     #918B83;  /* subdued, but readable for labels and captions */

  /* Colour — structural */
  --color-rule:           #2E2E2E;  /* hairline dividers */
  --color-rule-subtle:    #1F1F1F;  /* very faint rule */
  --color-border-light:   rgba(240, 237, 232, 0.14); /* light border on dark — for outline elements */
  --color-border-hover:   rgba(240, 237, 232, 0.22); /* hovered light border */

  /* Typography */
  --font-heading: 'Syne', system-ui, -apple-system, sans-serif;
  --font-body:    'Inter', system-ui, -apple-system, sans-serif;

  /* Type scale */
  --text-xs:    0.75rem;    /* 12px */
  --text-sm:    0.875rem;   /* 14px */
  --text-base:  1rem;       /* 16px */
  --text-md:    1.125rem;   /* 18px */
  --text-lg:    1.25rem;    /* 20px */
  --text-xl:    1.5rem;     /* 24px */
  --text-2xl:   2rem;       /* 32px */
  --text-3xl:   2.75rem;    /* 44px */
  --text-4xl:   3.5rem;     /* 56px */
  --text-hero:  clamp(2.45rem, 4.7vw, 4.25rem);

  /* Line heights */
  --leading-tight:  1.2;
  --leading-snug:   1.35;
  --leading-base:   1.6;
  --leading-loose:  1.75;

  /* Letter spacing */
  --tracking-heading: -0.015em; /* display headings — slight tighten for geometric sans */
  --tracking-wide:    0.05em;
  --tracking-wider:   0.1em;
  --tracking-widest:  0.15em;

  /* Spacing scale */
  --space-xs:   0.5rem;
  --space-sm:   1rem;
  --space-md:   1.5rem;
  --space-lg:   2.5rem;
  --space-xl:   4rem;
  --space-2xl:  6rem;
  --space-3xl:  9rem;

  /* Section vertical rhythm */
  --section-gap: clamp(4rem, 8vw, 8rem);

  /* Layout */
  --max-width:      1280px;
  --col-gap:        clamp(1.5rem, 2.5vw, 2rem);
  --container-pad:  clamp(1.25rem, 4vw, 2.5rem);

  /* Border radii */
  --radius-sm:  4px;
  --radius-md:  8px;
  --radius-lg:  16px;

  /* Transitions */
  --transition-fast:   150ms ease;
  --transition-base:   250ms ease;
  --transition-slow:   400ms ease;

  /* Shadows */
  --shadow-card:       0 1px 3px rgba(0, 0, 0, 0.3), 0 4px 16px rgba(0, 0, 0, 0.35);
  --shadow-card-hover: 0 2px 8px rgba(0, 0, 0, 0.4), 0 12px 40px rgba(0, 0, 0, 0.55);
  --shadow-section:    0 8px 32px rgba(0, 0, 0, 0.35); /* surface sections above base */

  /* Header */
  --header-height:  96px;
}