/*
 * Browntis Movies — Design Tokens
 * Editorial / cinematic. Deep ink + warm gold. Restrained motion.
 */

:root {
  /* ---------- Colour ---------- */
  --ink:          #08080A;
  --ink-0:        #050507;
  --ink-1:        #0F0F12;
  --ink-2:        #16161A;
  --ink-3:        #1E1E22;
  --ink-4:        #26262C;
  --line:         rgba(245, 241, 232, 0.06);
  --line-strong:  rgba(245, 241, 232, 0.13);
  --line-gold:    rgba(201, 169, 97, 0.25);

  --bone:         #F5F1E8;
  --bone-2:       #E6E1D4;
  --bone-3:       #D5CFBF;
  --dim:          #B8B4AB;
  --dim-2:        #8F8B82;
  --mute:         #5A5750;

  --gold:         #C9A961;
  --gold-bright:  #E5C170;
  --gold-deep:    #8E763E;
  --gold-faint:   rgba(201, 169, 97, 0.08);

  --rouge:        #8C3A2E;     /* burgundy whisper for hover detailing */
  --danger:       #C45A48;
  --success:      #6E8F5C;

  /* ---------- Typography ---------- */
  --font-display: 'Playfair Display', 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', 'SF Mono', 'IBM Plex Mono', Menlo, monospace;

  /* Modular scale (1.250 — major third) anchored at 16px */
  --fs-mono:    0.75rem;   /* 12px — uppercase eyebrow */
  --fs-xs:      0.8125rem; /* 13px */
  --fs-sm:      0.875rem;  /* 14px */
  --fs-md:      1rem;      /* 16px */
  --fs-lg:      1.125rem;  /* 18px */
  --fs-xl:      1.375rem;  /* 22px */
  --fs-2xl:     1.875rem;  /* 30px */
  --fs-3xl:     2.5rem;    /* 40px */
  --fs-4xl:     3.5rem;    /* 56px */
  --fs-5xl:     5rem;      /* 80px */
  --fs-hero:    clamp(2.75rem, 7vw, 6.5rem);

  --lh-tight:   1.05;
  --lh-snug:    1.2;
  --lh-normal:  1.5;
  --lh-loose:   1.7;

  --ls-tight:   -0.02em;
  --ls-display: -0.03em;
  --ls-mono:    0.18em;   /* For uppercase eyebrows */

  /* ---------- Spacing ---------- */
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  24px;
  --s-6:  32px;
  --s-7:  48px;
  --s-8:  64px;
  --s-9:  96px;
  --s-10: 128px;

  /* ---------- Layout ---------- */
  --container:        1320px;
  --container-narrow: 880px;
  --gutter:           clamp(20px, 4vw, 56px);
  --nav-h:            80px;

  /* ---------- Effects ---------- */
  --radius-sm:    2px;
  --radius:       3px;
  --radius-md:    6px;
  --shadow-soft:  0 10px 40px -20px rgba(0, 0, 0, 0.6);
  --shadow-card:  0 28px 80px -30px rgba(0, 0, 0, 0.95), 0 6px 22px -10px rgba(0, 0, 0, 0.6);
  --shadow-poster:0 40px 100px -36px rgba(0, 0, 0, 1), 0 18px 40px -18px rgba(0, 0, 0, 0.8);
  --shadow-gold:  0 0 0 1px rgba(201, 169, 97, 0.35), 0 16px 40px -24px rgba(201, 169, 97, 0.25);

  /* SVG film-grain texture, embedded so there's no extra HTTP request. */
  --grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.96  0 0 0 0 0.94  0 0 0 0 0.91  0 0 0 0.55 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.55'/></svg>");

  /* ---------- Motion ---------- */
  --ease:           cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-in-out:    cubic-bezier(0.7, 0, 0.3, 1);
  --dur-fast:       180ms;
  --dur:            320ms;
  --dur-slow:       640ms;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0ms;
    --dur:      0ms;
    --dur-slow: 0ms;
  }
}