/* ============================================================
 * MediaNet Cinematic — Design Tokens
 * Generated from DESIGN.md (Google Labs open spec, Apache 2.0).
 * Loaded BEFORE styles.css and medianet-2026.css so every legacy
 * declaration can reference these tokens. Direct hex/rgb values
 * inside legacy CSS will be progressively migrated to var(--mn-*).
 * ============================================================ */

@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url("https://fonts.gstatic.com/s/fraunces/v34/6NUh8FyLNQOQZAnv9bYEvDiIdE9Ea92uemAk.woff2") format("woff2-variations");
  font-variation-settings: "opsz" 144, "SOFT" 0, "WONK" 0;
}

/* Cabinet Grotesk dropped — Fontshare CORS-blocked. Replaced with
   Bricolage Grotesque (Google Fonts, variable, distinctive, no CORS issues). */

:root {
  /* ---------- Colors (surfaces — graded near-black, warm bias) ---------- */
  --mn-bg:                   #08090B;
  --mn-surface:              #0F1115;
  --mn-surface-container:    #16191F;
  --mn-surface-container-hi: #1E2128;
  --mn-surface-container-hh: #272A32;

  /* Ink — warm ivory, NOT pure white */
  --mn-on-surface:           #E8E6E1;
  --mn-on-surface-variant:   #A8A29E;
  --mn-on-surface-faint:     #6B6663;

  /* Borders — hairline 1px, replace box-shadows */
  --mn-outline:              #2A2D35;
  --mn-outline-faint:        #1B1E25;

  /* Brand — Netflix-red preserved, but rationed to primary CTAs */
  --mn-primary:              #E50914;
  --mn-primary-hover:        #FF1A2A;
  --mn-on-primary:           #FFFFFF;
  --mn-primary-container:    #7F0810;
  --mn-on-primary-container: #FFE4E5;

  /* Secondary — brass for badges, focus, micro-accents */
  --mn-secondary:            #D4A574;
  --mn-on-secondary:         #1C1610;
  --mn-secondary-container:  #3D2E1F;
  --mn-on-secondary-container: #F5D9B8;

  /* Status — only for feedback, never decorative */
  --mn-success:              #4ADE80;
  --mn-on-success:           #062512;
  --mn-warning:              #FBBF24;
  --mn-on-warning:           #2A1A00;
  --mn-error:                #FCA5A5;
  --mn-on-error:             #3F0A0A;

  /* Scrim — black with separate opacity tokens */
  --mn-scrim:                #000000;
  --mn-scrim-opacity-strong: 0.80;
  --mn-scrim-opacity-soft:   0.50;

  /* ---------- Typography ---------- */
  --mn-font-display:  "Fraunces", "Times New Roman", serif;
  --mn-font-headline: "Bricolage Grotesque", "Inter Tight", system-ui, sans-serif;
  --mn-font-body:     "Inter Tight", system-ui, sans-serif;
  --mn-font-mono:     "JetBrains Mono", "SF Mono", Menlo, monospace;

  /* Display sizes (clamp for responsive — fluid type) */
  --mn-text-hero-size:        clamp(3rem, 6vw + 1rem, 5.5rem);
  --mn-text-hero-line:        0.95;
  --mn-text-hero-track:       -0.035em;

  --mn-text-modal-size:       clamp(2rem, 3.5vw + 1rem, 3rem);
  --mn-text-modal-line:       1.0;
  --mn-text-modal-track:      -0.03em;

  --mn-text-h-lg-size:        1.5rem;     /* 24 */
  --mn-text-h-lg-line:        1.15;
  --mn-text-h-lg-track:       -0.02em;

  --mn-text-h-md-size:        1.125rem;   /* 18 */
  --mn-text-h-md-line:        1.25;
  --mn-text-h-md-track:       -0.015em;

  --mn-text-row-size:         1rem;       /* 16 */
  --mn-text-row-line:         1.3;
  --mn-text-row-track:        -0.005em;

  --mn-text-body-lg-size:     1rem;
  --mn-text-body-lg-line:     1.55;
  --mn-text-body-md-size:     0.9375rem;
  --mn-text-body-md-line:     1.5;
  --mn-text-body-sm-size:     0.8125rem;
  --mn-text-body-sm-line:     1.45;

  /* Labels — small-caps editorial */
  --mn-text-cat-size:         0.6875rem;  /* 11 */
  --mn-text-cat-track:        0.12em;
  --mn-text-cat-weight:       700;

  --mn-text-meta-size:        0.8125rem;  /* 13 */
  --mn-text-meta-track:       0.01em;

  /* ---------- Spacing (8px grid) ---------- */
  --mn-space-1:  4px;
  --mn-space-2:  8px;
  --mn-space-3:  12px;
  --mn-space-4:  16px;
  --mn-space-6:  24px;
  --mn-space-8:  32px;
  --mn-space-12: 48px;
  --mn-space-16: 64px;
  --mn-space-24: 96px;

  --mn-page-padding: clamp(16px, 4vw, 48px);
  --mn-section-gap:  var(--mn-space-12);
  --mn-row-gap:      var(--mn-space-6);
  --mn-card-gap:     var(--mn-space-4);
  --mn-control-gap:  var(--mn-space-3);

  /* ---------- Radius ---------- */
  --mn-radius-none: 0;
  --mn-radius-sm:   0.25rem;     /* 4 */
  --mn-radius:      0.5rem;      /* 8 */
  --mn-radius-md:   0.75rem;     /* 12 */
  --mn-radius-lg:   1rem;        /* 16 */
  --mn-radius-xl:   1.5rem;      /* 24 */
  --mn-radius-full: 9999px;

  /* ---------- Component dims ---------- */
  --mn-control-h:     48px;
  --mn-control-h-sm:  44px;       /* min tap target */
  --mn-control-h-lg:  56px;

  /* ---------- Focus ring (brass, NOT red — accessibility separation) ---------- */
  --mn-focus-ring: 0 0 0 3px var(--mn-secondary);
  --mn-focus-ring-offset: 2px;

  /* ---------- Easing & motion ---------- */
  --mn-ease-out:      cubic-bezier(0.22, 1, 0.36, 1);
  --mn-ease-in-out:   cubic-bezier(0.65, 0, 0.35, 1);
  --mn-dur-fast:      120ms;
  --mn-dur-normal:    200ms;
  --mn-dur-slow:      400ms;

  /* ---------- Legacy compatibility aliases ----------
   * These map old token names used across the codebase to the new system,
   * so we don't have to rewrite every single rule before tokens take effect. */
  --bg-color:             var(--mn-bg);
  --bg-card:              var(--mn-surface-container);
  --text-primary:         var(--mn-on-surface);
  --text-secondary:       var(--mn-on-surface-variant);
  --text-muted:           var(--mn-on-surface-faint);
  --accent-red:           var(--mn-primary);
  --accent-red-hover:     var(--mn-primary-hover);
  --border-color:         var(--mn-outline);
  --radius-card:          var(--mn-radius-md);
  --shadow-card:          0 0 0 1px var(--mn-outline-faint);
  --shadow-card-hover:    0 0 0 1px var(--mn-outline);
  --transition-base:      var(--mn-dur-normal) var(--mn-ease-out);

  /* medianet-2026.css legacy --mn-* names — map to new system */
  --mn-bg-2:              var(--mn-surface);
  --mn-border:            var(--mn-outline);
  --mn-accent:            var(--mn-primary);
  --mn-accent-2:          var(--mn-secondary);
  --mn-accent-grad:       var(--mn-primary);  /* gradient killed — single ember */
  --mn-text:              var(--mn-on-surface);
  --mn-text-2:            var(--mn-on-surface-variant);
  --mn-text-3:            var(--mn-on-surface-faint);
}

/* ---------- prefers-reduced-motion ---------- */
@media (prefers-reduced-motion: reduce) {
  :root {
    --mn-dur-fast:   0.01ms;
    --mn-dur-normal: 0.01ms;
    --mn-dur-slow:   0.01ms;
  }
}

/* ---------- Base reset additions ---------- */
html {
  background: var(--mn-bg);
  color-scheme: dark;
}

body {
  font-family: var(--mn-font-body);
  font-size: var(--mn-text-body-md-size);
  line-height: var(--mn-text-body-md-line);
  color: var(--mn-on-surface);
  background: var(--mn-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "tnum", "ss01";
}

/* Tabular numerals everywhere for aligned metadata strips */
.meta, .runtime, .year, .age, .episode-num, time, [data-numeric] {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

/* Focus ring — brass, always visible, never removed */
*:focus-visible {
  outline: var(--mn-focus-ring);
  outline-offset: var(--mn-focus-ring-offset);
  border-radius: var(--mn-radius-sm);
}

/* Selection — branded but subtle */
::selection {
  background: var(--mn-secondary);
  color: var(--mn-on-secondary);
}