/*
 * MY CINEMA design tokens
 * Every consuming rule also declares a plain-value fallback before var().
 * This keeps the essential presentation usable in browsers without custom
 * property support while allowing one-place theming in capable browsers.
 */

:root {
  /* Surfaces */
  --color-bg: #101216;
  --color-bg-deep: #090b0e;
  --color-surface: #181b21;
  --color-surface-raised: #20242c;
  --color-surface-soft: #282d37;
  --color-surface-hover: #303641;
  --color-overlay: rgba(7, 9, 12, 0.76);
  --color-overlay-strong: rgba(7, 9, 12, 0.9);

  /* Text */
  --color-text: #f1f3f6;
  --color-text-soft: #c5cad2;
  --color-text-muted: #929aa7;
  --color-text-dim: #6f7783;

  /* Brand and semantic colors */
  --color-accent: #7189d8;
  --color-accent-hover: #8299e3;
  --color-accent-strong: #93a8ec;
  --color-accent-soft: rgba(113, 137, 216, 0.18);
  --color-accent-faint: rgba(113, 137, 216, 0.09);
  --color-gold: #c7a96a;
  --color-gold-soft: rgba(199, 169, 106, 0.18);
  --color-success: #66aa86;
  --color-success-soft: rgba(102, 170, 134, 0.18);
  --color-warning: #d0a65d;
  --color-warning-soft: rgba(208, 166, 93, 0.18);
  --color-danger: #c66f77;
  --color-danger-soft: rgba(198, 111, 119, 0.18);
  --color-info: #73a7c7;
  --color-info-soft: rgba(115, 167, 199, 0.18);

  /* Lines and focus */
  --color-border: #333945;
  --color-border-soft: #292e38;
  --color-control-border: #4a5260;
  --color-divider: rgba(255, 255, 255, 0.09);
  --color-focus: #aab9f3;
  --focus-ring: 0 0 0 4px rgba(170, 185, 243, 0.46);

  /* Typography: system faces only, so the frontend works offline. */
  --font-sans: Arial, Helvetica, "Segoe UI", sans-serif;
  --font-mono: Consolas, "Courier New", monospace;
  --font-size-xs: 14px;
  --font-size-sm: 16px;
  --font-size-md: 19px;
  --font-size-lg: 22px;
  --font-size-xl: 28px;
  --font-size-2xl: 36px;
  --font-size-3xl: 48px;
  --font-size-hero: 68px;
  --line-tight: 1.16;
  --line-normal: 1.5;
  --line-relaxed: 1.7;

  /* Space scale */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 40px;
  --space-9: 48px;
  --space-10: 64px;
  --space-11: 80px;
  --space-12: 96px;

  /* App geometry */
  --container-max: 1760px;
  --page-gutter: 56px;
  --header-height: 92px;
  --mobile-nav-height: 72px;
  --control-height: 60px;
  --control-height-sm: 48px;
  --control-icon-size: 24px;
  --control-gap: 10px;
  --poster-ratio: 150%;
  --card-width-tv: 264px;
  --card-width-desktop: 232px;
  --detail-poster-width: 330px;

  /* Shape */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-card: 12px;
  --radius-round: 999px;

  /* Depth: deliberately restrained for dark-room comfort. */
  --shadow-sm: 0 5px 16px rgba(0, 0, 0, 0.24);
  --shadow-control: 0 8px 22px rgba(0, 0, 0, 0.24);
  --shadow-md: 0 12px 30px rgba(0, 0, 0, 0.32);
  --shadow-lg: 0 20px 54px rgba(0, 0, 0, 0.42);
  --shadow-focus: 0 14px 40px rgba(4, 6, 10, 0.62);

  /* Motion stays short and is removed in responsive.css when requested. */
  --duration-fast: 120ms;
  --duration-normal: 180ms;
  --ease-standard: ease-out;

  /* Layer order */
  --z-base: 1;
  --z-header: 40;
  --z-dropdown: 60;
  --z-overlay: 80;
  --z-player: 100;
  --z-toast: 120;
}

/* Optional class-level accent choices used by the settings demo. */
.theme-blue {
  --color-accent: #7189d8;
  --color-accent-hover: #8299e3;
  --color-focus: #aab9f3;
}

.theme-slate {
  --color-accent: #6f91a6;
  --color-accent-hover: #82a2b5;
  --color-focus: #a8c2d1;
}

.theme-violet {
  --color-accent: #8577c9;
  --color-accent-hover: #978bd3;
  --color-focus: #bab0e8;
}

.theme-gold {
  --color-accent: #b79a62;
  --color-accent-hover: #c8aa70;
  --color-focus: #e1c992;
}