/*
  Cinema Circle Nepal — design tokens

  Contrast (WCAG 2.1, measured):
    --gold on --ink            8.13:1  AA + AAA at 12px labels
    --gold-light on --ink     11.83:1  AA + AAA
    --ivory on --ink          17.44:1  AA + AAA
    --ink on --gold (button)   8.13:1  AA + AAA
    --text-muted on --ink     10.83:1  AA + AAA  ← captions, credits, source lines
    --gold on --ivory          2.14:1  FAIL — HARD PROHIBITION, never text
    --ivory-45 on --ink        4.15:1  FAIL for text — decorative only

  --gold may be used for 12px labels (category small-caps, lockup tagline).
  Captions, image credits, source lines, and evidence-card attributions
  use --text-caption (--text-muted #C4C0B6), never --ivory-45.
*/

:root {
  /* Colour */
  --ink:            #0B0B0C;
  --ink-raised:     #121214;
  --ink-deep:       #08080A;
  --gold:           #C9A227;
  --gold-light:     #E3C766;
  --gold-hairline:  rgba(201, 162, 39, 0.18);
  --ivory:          #F4F1EA;
  --ivory-70:       rgba(244, 241, 234, 0.70);
  --ivory-45:       rgba(244, 241, 234, 0.45); /* decorative only — never text */

  /* Text roles */
  --gold-text:      var(--gold);       /* 8.13:1 — labels at 12px are legal */
  --gold-stat:      var(--gold);       /* large numerals */
  --text-primary:   var(--ivory);
  --text-muted:     #C4C0B6;           /* 10.83:1 on --ink */
  --text-caption:   var(--text-muted); /* captions, credits, source lines */
  --focus-ring:     2px solid var(--gold);
  --focus-offset:   2px;

  /* Type */
  --font-display: 'Playfair Display', Georgia, serif;
  --font-body:    'Inter', system-ui, sans-serif;
  --font-np:      'Mukta', 'Noto Sans Devanagari', sans-serif;

  --fs-hero:    clamp(2.75rem, 7vw, 6rem);
  --fs-h1:      clamp(2.25rem, 5vw, 3.75rem);
  --fs-h2:      clamp(1.75rem, 3.5vw, 2.5rem);
  --fs-h3:      1.5rem;
  --fs-body:    1rem;      /* 16px minimum — never below */
  --fs-caption: 0.875rem;
  --fs-label:   0.75rem;

  --lh-latin: 1.7;
  --lh-np:    1.85;
  --ls-label: 0.12em;

  /* Spacing scale — nothing outside this */
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 24px;
  --s6: 32px;
  --s7: 48px;
  --s8: 64px;
  --s9: 96px;
  --s10: 128px;

  --radius: 4px;
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --dur: 200ms;
  --dur-enter: 400ms;
  --enter-rise: 8px;

  --header-h: 72px;
  --header-h-m: 60px;
  --tap: 44px;
  --btn-h: 48px;
  --btn-h-m: 52px;
  --nav-row: 56px;
  --measure: 1280px;
  --bleed: 1440px;
  --section-pad: var(--s10);
  --section-pad-m: var(--s7);

  --theme-color: #0B0B0C;
  --header-solid: rgba(11, 11, 12, 0.96);

  --safe-t: env(safe-area-inset-top, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
}

:lang(ne),
[lang="ne"] {
  font-family: var(--font-np);
  line-height: var(--lh-np);
  font-size: 1.0625em;
}

html[lang="ne"] .font-display,
html[lang="ne"] .site-logo__name {
  font-family: var(--font-display);
  line-height: 1.2;
  font-size: 1em;
}

@media (max-width: 719px) {
  :root {
    --section-pad: var(--s7);
    --header-h: var(--header-h-m);
    --btn-h: var(--btn-h-m);
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur: 0ms;
    --dur-enter: 0ms;
    --enter-rise: 0px;
    --ease: linear;
  }
}

/*
  HARD PROHIBITION: never pair --gold (or --gold-light) as text on --ivory
  or any light surface. 2.14:1 fails AA at every size. Future light sections
  must use --ink on --ivory.

  Forbidden anywhere in the theme: LG brand red, gold gradients,
  film-reel clip-art tokens.
*/