/* latin - 400 */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../../fonts/plus-jakarta-sans-v12-latin-400.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin - 500 */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../../fonts/plus-jakarta-sans-v12-latin-500.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin - 600 */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../../fonts/plus-jakarta-sans-v12-latin-600.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin - 700 */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../../fonts/plus-jakarta-sans-v12-latin-700.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin - 800 */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('../../fonts/plus-jakarta-sans-v12-latin-800.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/**
 * MOSTLY MOVIES PLATFORM - CENTRAL DESIGN TOKENS (CI MASTER)
 * Single Source of Truth for colors, lighting, typography, and depth.
 */

:root {
  /* 1. PALETTE: DEEP OBSIDIAN & VELVET DARKROOM */
  --mm-bg-black: #050507;
  --mm-bg-obsidian: #09090d;
  --mm-bg-surface: #121218;
  --mm-bg-elevated: #1a1a24;
  --mm-bg-glass: rgba(18, 18, 24, 0.85);
  --mm-bg-canvas: #06070a;
  --mm-bg-gradient:
    radial-gradient(ellipse 80% 50% at 50% -8%, rgba(255, 215, 0, 0.08) 0%, rgba(255, 77, 38, 0.04) 40%, transparent 75%),
    radial-gradient(ellipse 100% 80% at 50% 45%, transparent 40%, rgba(3, 4, 6, 0.85) 100%),
    radial-gradient(ellipse 70% 35% at 50% 100%, rgba(123, 97, 255, 0.04) 0%, transparent 70%);

  /* 2. BORDERS & LINES */
  --mm-border-hairline: rgba(255, 255, 255, 0.06);
  --mm-border-subtle: rgba(255, 255, 255, 0.12);
  --mm-border-medium: rgba(255, 255, 255, 0.22);
  --mm-border-focus: rgba(229, 169, 59, 0.6);

  /* 3. ACCENT & HALATION ILLUMINATION */
  --mm-accent-gold: #e5a93b;
  --mm-accent-gold-hover: #f5b748;
  --mm-accent-gold-glow: rgba(229, 169, 59, 0.35);
  --mm-accent-cyan: #00f2fe;
  --mm-accent-cyan-glow: rgba(0, 242, 254, 0.3);
  --mm-accent-purple: #7b61ff;
  --mm-accent-purple-glow: rgba(123, 97, 255, 0.3);
  --mm-accent-amber: #f59e0b;
  --mm-accent-amber-glow: rgba(245, 158, 11, 0.35);

  /* 4. SEMANTIC STATUS COLORS */
  --mm-success: #2ecc71;
  --mm-success-glow: rgba(46, 204, 113, 0.3);
  --mm-error: #ff4757;
  --mm-error-glow: rgba(255, 71, 87, 0.3);
  --mm-info: #00f2fe;

  /* 5. GAME-SPECIFIC ACCENT Nuances (Allowed for subtle light & badges) */
  --mm-accent-cinesnip: #e5a93b;
  --mm-accent-cinecut: #e5a93b;
  --mm-accent-chronos: #00f2fe;
  --mm-accent-cineclues: #e5a93b;
  --mm-accent-plotlines: #7b61ff;
  --mm-accent-cinedegrees: #a855f7;
  --mm-accent-keyframe: #f59e0b;

  /* 6. TEXT CONTRAST HIERARCHY (WCAG AA/AAA Compliant) */
  --mm-text-primary: #f8f8fc;
  --mm-text-secondary: #a2a2b4;
  --mm-text-muted: #646476;
  --mm-text-dim: #3e3e4e;

  /* 7. TYPOGRAPHY SCALING */
  --mm-font-sans: 'Plus Jakarta Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --mm-font-mono: 'JetBrains Mono', 'Dank Mono', ui-monospace, SFMono-Regular, monospace;

  /* 8. CORNER RADII & BUTTON METRICS */
  --mm-radius-sm: 6px;
  --mm-radius-md: 10px;
  --mm-radius-lg: 16px;
  --mm-radius-xl: 24px;
  --mm-radius-pill: 9999px;

  /* Central Button Standard */
  --mm-btn-radius: 10px;
  --mm-btn-min-height: 46px;

  /* 9. CONTAINER & VIEWPORT METRICS */
  --mm-container-max: 680px;
  --mm-container-wide: 840px;

  /* 10. SPACING SCALE (4px/8px Grid) */
  --mm-space-2xs: 4px;
  --mm-space-xs: 8px;
  --mm-space-sm: 12px;
  --mm-space-md: 16px;
  --mm-space-lg: 24px;
  --mm-space-xl: 32px;
  --mm-space-2xl: 48px;

  /* 11. ELEVATIONS & SHADOWS */
  --mm-shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.4);
  --mm-shadow-md: 0 10px 30px rgba(0, 0, 0, 0.6);
  --mm-shadow-lg: 0 20px 50px rgba(0, 0, 0, 0.8);
  --mm-shadow-gold: 0 0 35px var(--mm-accent-gold-glow);
  --mm-shadow-cyan: 0 0 35px var(--mm-accent-cyan-glow);

  /* 12. TRANSITIONS */
  --mm-transition-fast: 0.15s cubic-bezier(0.16, 1, 0.3, 1);
  --mm-transition-smooth: 0.28s cubic-bezier(0.16, 1, 0.3, 1);
  --mm-transition-bounce: 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Global Reset Utilities */
[hidden] {
  display: none !important;
}