/* KRMovies — Design Token Foundation
   Boutique cinema design system — Fraunces, Inter, JetBrains Mono
   Single identity: nocturnal, grainy, editorial, festival-catalog */

:root {
  /* === DARK MODE (After Hours) === */
  --ink:        #0B0A08;
  --ink-2:      #121009;
  --paper:      #1A170F;
  --paper-hi:   #211C12;
  --bone:       #EDE6D2;
  --bone-muted: #A39A82;
  --bone-faint: #6B6451;
  --hairline:   rgba(237,230,210,0.10);
  --scrim:      rgba(11,10,8,0.78);
  
  /* Signal accent — tungsten amber */
  --ember:      #E8A33D;
  --ember-deep: #B07522;
  --rouge:      #C0392B;
  --moss:       #7A8B5C;
}

:root[data-mode="light"] {
  /* === LIGHT MODE (Matinee) === */
  --ink:        #F4EFE2;
  --ink-2:      #EAE3D0;
  --paper:      #FFFFFF;
  --paper-hi:   #FBF6E8;
  --bone:       #1A1610;
  --bone-muted: #5A5240;
  --bone-faint: #8C846E;
  --hairline:   rgba(26,22,16,0.12);
  --scrim:      rgba(244,239,226,0.88);
  --ember:      #B5761E;
}

/* === TYPOGRAPHY === */
:root {
  /* Font families */
  --font-display: 'Fraunces', serif;
  --font-body:    'Inter', sans-serif;
  --font-mono:    'JetBrains Mono', monospace;
  
  /* Type scale */
  --t-display:   clamp(56px, 9vw, 132px);
  --t-h1:        clamp(40px, 5.5vw, 72px);
  --t-h2:        clamp(28px, 3vw, 40px);
  --t-h3:        22px;
  --t-h4:        17px;
  --t-body:      15px;
  --t-body-sm:   13px;
  --t-caption:   12px;
  --t-meta:      13px;
  --t-btn:       13px;
  
  /* Line heights */
  --lh-display:  0.92;
  --lh-h1:       0.96;
  --lh-h2:       1.05;
  --lh-h3:       1.2;
  --lh-h4:       1.3;
  --lh-body:     1.6;
  --lh-body-sm:  1.55;
  --lh-caption:  1.4;
  --lh-meta:     1;
  
  /* Letter spacing */
  --ls-display:  -0.035em;
  --ls-h1:       -0.025em;
  --ls-h2:       -0.02em;
  --ls-h3:       -0.01em;
  --ls-caption:  0.12em;
  --ls-meta:     0.02em;
  --ls-btn:      0.04em;
}

/* === SPACING === */
:root {
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 20px;
  --s-5: 32px;
  --s-6: 52px;
  --s-7: 84px;
  --s-8: 136px;
  
  /* Layout rhythm */
  --row-gap:    var(--s-7);
  --pad-x:      clamp(20px, 5vw, 80px);
  --poster-w:   180px;
  --poster-h:   270px;
  --poster-gap: var(--s-3);
}

/* === RADIUS === */
:root {
  --r-sm: 2px;
  --r-md: 6px;
}

/* === SHADOWS === */
:root {
  --lift-1: 0 1px 0 var(--hairline), 0 16px 32px -16px rgba(0,0,0,0.55);
  --lift-2: 0 24px 64px -20px rgba(0,0,0,0.7);
}

/* === MOTION === */
:root {
  --ease-set:  cubic-bezier(0.2, 0.8, 0.2, 1);
  --dur-set:   240ms;
  --dur-draw:  320ms;
  --dur-tick:  480ms;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-set:  0ms;
    --dur-draw: 0ms;
    --dur-tick: 0ms;
  }
}