/*
 * Motchill Design Tokens — SINGLE SOURCE OF TRUTH
 * Load first among Motchill layers (after legacy main.css).
 * Edit colors here only; other CSS files should use var(--token-name).
 */

:root {
  /* ── Base palette ── */
  --bg-page: #05080d;
  --bg-page-rgb: 5, 8, 13;
  --bg-header: #0d1118;
  --bg-surface: #0d141d;
  --bg-surface-rgb: 17, 24, 33;
  --bg-surface-2: #111821;
  --bg-surface-3: #171f2a;
  --bg-card-hover: #171f2a;
  --border-subtle: rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.14);
  --text-primary: #ffffff;
  --text-primary-rgb: 255, 255, 255;
  --text-secondary: #a8b0bd;
  --text-muted: #77808c;
  /* Brand warm orange — single family (no coral / amber split) */
  --accent-hot: #f5a524;
  --accent-hot-rgb: 245, 165, 36;
  --accent-hot-light: #fbbf24;
  --accent-hot-dark: #d97706;
  --accent: var(--accent-hot);
  --accent-rgb: var(--accent-hot-rgb);
  --accent-2: var(--accent-hot-light);
  --accent-dark: var(--accent-hot-dark);
  --accent-gradient-mid: #f59e0b;
  --accent-gradient-light: var(--accent-hot-light);
  --border-accent: rgba(var(--accent-hot-rgb), 0.35);
  --danger: #ef4444;
  --success: #22c55e;
  --info: #4f46e5;
  --white: #fff;
  --white-rgb: 255, 255, 255;
  --black-rgb: 0, 0, 0;
  --on-accent: #111;

  /* ── Movie detail surfaces ── */
  --detail-page-bg: #070b10;
  --detail-surface: #101720;
  --detail-surface-2: #121b26;
  --detail-surface-hover: #172231;
  --detail-border: rgba(255, 255, 255, 0.08);
  --detail-border-strong: rgba(255, 255, 255, 0.12);
  --detail-text: #ffffff;
  --detail-text-muted: #9aa4b2;
  --detail-accent: var(--accent-hot);

  /* ── Search / filter / overlay UI (alias base palette) ── */
  --ui-panel-bg: #0b0d10;
  --ui-panel-bg-2: #111318;
  --ui-panel-dropdown: rgba(15, 17, 21, 0.98);
  --ui-panel-border: rgba(255, 255, 255, 0.06);
  --ui-panel-text: #e5e7eb;
  --ui-panel-text-muted: #9ca3af;
  --ui-primary: var(--accent-hot);
  --ui-primary-text: var(--accent-hot-light);
  --ui-primary-soft: rgba(var(--accent-hot-rgb), 0.12);
  --ui-primary-hover: rgba(var(--accent-hot-rgb), 0.08);
  --ui-primary-active: rgba(var(--accent-hot-rgb), 0.15);
  --ui-primary-border: rgba(var(--accent-hot-rgb), 0.35);
  --ui-primary-border-hover: rgba(var(--accent-hot-rgb), 0.4);
  --ui-primary-ring: rgba(var(--accent-hot-rgb), 0.25);
  --ui-primary-dark: var(--accent-hot-dark);
  --ui-ease: cubic-bezier(0.22, 1, 0.36, 1);

  /* ── Radius / shadow / motion ── */
  --radius-xs: 6px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --radius-pill: 999px;
  --shadow-soft: 0 14px 34px rgba(var(--black-rgb), 0.28);
  --shadow-premium: 0 24px 70px rgba(var(--black-rgb), 0.45);
  --shadow-accent: 0 0 42px rgba(var(--accent-rgb), 0.1);
  --transition-fast: 0.18s ease;
  --transition-base: 0.25s cubic-bezier(0.4, 0, 0.2, 1);

  /* ── Layout spacing ── */
  --layout-max: 1320px;
  --layout-gutter-x: 18px;
  --layout-col-gap: 26px;
  --layout-section-top: 30px;
  --home-grid-gap: 11px;

  /* ── Hero banner ── */
  --hero-bg: var(--bg-page);
  --hero-border: rgba(var(--white-rgb), 0.06);
  --hero-border-hover: var(--border-accent);
  --hero-border-active: rgba(var(--accent-rgb), 0.22);
  --hero-shadow-hover: 0 22px 60px rgba(var(--black-rgb), 0.42), 0 0 24px rgba(var(--accent-rgb), 0.1);
  --hero-shadow-active: 0 10px 28px rgba(var(--black-rgb), 0.28);
  --hero-overlay: none;
  --hero-fade: linear-gradient(90deg, rgba(0, 0, 0, 0.58) 0%, rgba(0, 0, 0, 0.34) 26%, rgba(0, 0, 0, 0.14) 44%, rgba(0, 0, 0, 0.04) 58%, rgba(0, 0, 0, 0) 72%);
  --hero-grain-size: 5px;
  --hero-text: var(--text-primary);
  --hero-text-hover: var(--white);
  --hero-text-soft: rgba(var(--text-primary-rgb), 0.78);
  --hero-text-muted: var(--text-secondary);
  --hero-text-faint: var(--text-muted);
  --hero-accent: var(--accent-hot);
  --hero-accent-soft: var(--accent);
  --hero-accent-dark: var(--accent-dark);
  --hero-accent-glow: rgba(var(--accent-hot-rgb), 0.28);
  --hero-accent-glow-strong: rgba(var(--accent-hot-rgb), 0.36);
  --hero-btn-gradient: linear-gradient(135deg, var(--accent-hot) 0%, var(--accent-gradient-mid) 100%);
  --hero-btn-gradient-hover: linear-gradient(135deg, var(--accent-gradient-light) 0%, var(--accent-hot) 100%);
  --hero-btn-shadow: 0 8px 22px rgba(var(--accent-hot-rgb), 0.28);
  --hero-btn-shadow-hover: 0 12px 28px rgba(var(--accent-hot-rgb), 0.34);
  --hero-glass-border: rgba(var(--white-rgb), 0.14);
  --hero-glass-border-hover: rgba(var(--white-rgb), 0.22);
  --hero-glass-bg: rgba(var(--white-rgb), 0.06);
  --hero-glass-bg-hover: rgba(var(--white-rgb), 0.1);
  --hero-stat-bg: rgba(17, 24, 33, 0.62);
  --hero-stat-border: rgba(var(--white-rgb), 0.1);
  --hero-stat-text: var(--hero-text);
  --hero-title-shadow: 0 2px 4px rgba(0, 0, 0, 0.95), 0 8px 24px rgba(0, 0, 0, 0.82), 0 0 40px rgba(0, 0, 0, 0.45);
  --hero-copy-shadow: 0 1px 8px rgba(0, 0, 0, 0.88);
  --hero-dot-idle: rgba(var(--white-rgb), 0.35);
  --hero-dot-active: var(--accent-hot);

  /* ── Legacy / layer aliases ── */
  --mtc-bg-deep: var(--bg-page);
  --mtc-bg-main: var(--bg-page);
  --mtc-bg: var(--bg-page);
  --mtc-surface-1: var(--bg-surface);
  --mtc-surface-2: var(--bg-surface-2);
  --mtc-surface: var(--bg-surface);
  --mtc-surface-sidebar: var(--bg-surface-2);
  --mtc-border-soft: var(--border-subtle);
  --mtc-border: var(--border-subtle);
  --mtc-border-strong: var(--border-strong);
  --mtc-text-primary: var(--text-primary);
  --mtc-text-secondary: var(--text-secondary);
  --mtc-text: rgba(var(--text-primary-rgb), 0.92);
  --mtc-muted: rgba(var(--text-primary-rgb), 0.62);
  --mtc-accent: var(--accent-hot);
  --mtc-accent-soft: var(--accent-hot-light);
  --mtc-accent-deep: var(--accent-hot-dark);
  --mtc-danger: var(--danger);
  --mtc-success: var(--success);
  --mtc-radius-lg: var(--radius-xl);
  --mtc-radius-md: var(--radius-lg);
  --mtc-radius-sm: var(--radius-sm);
  --mtc-radius-xs: var(--radius-xs);
  --mtc-shadow-soft: var(--shadow-soft);
  --mtc-ease: var(--transition-base);

  /* Search module aliases */
  --mtc-search-primary: var(--ui-primary);
  --mtc-search-primary-text: var(--ui-primary-text);
  --mtc-search-primary-soft: var(--ui-primary-soft);
  --mtc-search-primary-hover: var(--ui-primary-hover);
  --mtc-search-primary-active: var(--ui-primary-soft);
  --mtc-search-primary-border: var(--ui-primary-border);
  --mtc-search-primary-ring: var(--ui-primary-ring);
  --mtc-search-surface: var(--ui-panel-bg);
  --mtc-search-surface-2: var(--ui-panel-bg-2);
  --mtc-search-dropdown: var(--ui-panel-dropdown);
  --mtc-search-border: var(--ui-panel-border);
  --mtc-search-text: var(--ui-panel-text);
  --mtc-search-text-muted: var(--ui-panel-text-muted);
  --mtc-search-ease: var(--ui-ease);

  /* Filter module aliases */
  --mtc-filter-primary: var(--ui-primary);
  --mtc-filter-primary-text: var(--ui-primary-text);
  --mtc-filter-primary-soft: var(--ui-primary-soft);
  --mtc-filter-primary-hover: var(--ui-primary-hover);
  --mtc-filter-primary-active: var(--ui-primary-active);
  --mtc-filter-primary-border: var(--ui-primary-border);
  --mtc-filter-primary-border-hover: var(--ui-primary-border-hover);
  --mtc-filter-primary-ring: var(--ui-primary-ring);
  --mtc-filter-primary-dark: var(--ui-primary-dark);
  --mtc-filter-bg: var(--ui-panel-bg-2);
  --mtc-filter-bg-panel: linear-gradient(180deg, var(--ui-panel-bg) 0%, var(--ui-panel-bg-2) 100%);
  --mtc-filter-border: var(--ui-panel-border);
  --mtc-filter-border-strong: rgba(255, 255, 255, 0.08);
  --mtc-filter-text: var(--ui-panel-text);
  --mtc-filter-text-muted: var(--ui-panel-text-muted);
  --mtc-filter-ease: var(--ui-ease);
  --mtc-filter-dur: 0.2s;

  /* ── Genre explore page ── */
  --genre-glow: radial-gradient(circle at 30% 0%, rgba(var(--accent-rgb), 0.06), transparent 36%);
  --genre-card-bg: var(--bg-surface-2);
  --genre-card-surface: rgba(var(--bg-surface-rgb), 0.92);
  --genre-card-surface-deep: rgba(var(--bg-surface-rgb), 0.96);
  --genre-card-border: var(--border-subtle);
  --genre-card-border-hover: rgba(var(--accent-rgb), 0.38);
  --genre-card-shadow-hover: 0 12px 30px rgba(var(--black-rgb), 0.28);
  --genre-featured-gradient: linear-gradient(135deg, rgba(var(--accent-rgb), 0.20), rgba(var(--bg-surface-rgb), 0.92));
  --genre-overlay: linear-gradient(180deg, rgba(var(--bg-page-rgb), 0.08), rgba(var(--bg-page-rgb), 0.78));
  --genre-chip-bg: rgba(var(--white-rgb), 0.035);
  --genre-chip-border: rgba(var(--white-rgb), 0.07);
  --genre-chip-text: rgba(var(--text-primary-rgb), 0.92);
  --genre-chip-arrow: rgba(var(--text-primary-rgb), 0.42);
  --genre-chip-radius: 9px;
  --genre-chip-hover-bg: rgba(var(--accent-rgb), 0.09);
  --genre-chip-hover-border: rgba(var(--accent-rgb), 0.25);
  --genre-popular-bg: rgba(var(--accent-hot-rgb), 0.08);
  --genre-popular-border: rgba(var(--accent-hot-rgb), 0.16);
  --genre-popular-hover-bg: rgba(var(--accent-hot-rgb), 0.14);
  --genre-row-bg: rgba(var(--white-rgb), 0.035);
  --genre-row-border: rgba(var(--white-rgb), 0.06);
  --genre-row-hover-bg: rgba(var(--accent-rgb), 0.08);
  --genre-row-hover-border: rgba(var(--accent-rgb), 0.22);
  --genre-accent-bar: linear-gradient(180deg, var(--accent-hot), var(--accent));
  --tone-success-rgb: 74, 222, 128;
  --tone-blue-rgb: 96, 165, 250;
  --tone-purple-rgb: 168, 85, 247;
  --tone-neutral-rgb: 120, 113, 108;
  --danger-rgb: 239, 68, 68;
}

@media (min-width: 1280px) {
  :root {
    --layout-max: 1360px;
  }
}