/**
 * Filmistaan Design System - Design Tokens & Variables
 * ----------------------------------------------------
 * High-contrast cinematic dark palette with electric scarlet accents
 */

:root {
  /* Brand Colors - Exact sampled match to Filmistaan 3D Logo (#ed0305 / #fc2a2b / #ae0101) */
  --color-brand-red: #ed0305;
  --color-brand-red-hover: #fc2a2b;
  --color-brand-red-dark: #ae0101;
  --color-brand-red-deep: #780002;
  --color-brand-red-subtle: rgba(237, 3, 5, 0.1);
  --color-brand-red-glow: rgba(237, 3, 5, 0.45);
  --color-brand-red-border: rgba(237, 3, 5, 0.35);

  /* Neutrals & Surfaces */
  --color-bg-base: #070709;
  --color-bg-surface: #0e0e12;
  --color-bg-card: rgba(18, 18, 23, 0.75);
  --color-bg-card-hover: rgba(26, 26, 34, 0.85);
  --color-bg-input: #0b0b0f;

  /* Text & Accents */
  --color-text-main: #ffffff;
  --color-text-secondary: #c4c4ce;
  --color-text-muted: #8e8e9c;
  --color-text-dim: #60606d;

  /* Borders & Lines */
  --color-border-subtle: rgba(255, 255, 255, 0.08);
  --color-border-medium: rgba(255, 255, 255, 0.16);
  --color-border-active: var(--color-brand-red);

  /* Gradients - Metallic Cinema Sheen matching Logo */
  --grad-primary: linear-gradient(135deg, #fc2a2b 0%, #ed0305 45%, #ae0101 100%);
  --grad-primary-hover: linear-gradient(135deg, #ff4143 0%, #fc2a2b 45%, #c40204 100%);
  --grad-surface: linear-gradient(145deg, rgba(24, 24, 30, 0.8) 0%, rgba(13, 13, 17, 0.95) 100%);
  --grad-card-border: linear-gradient(135deg, rgba(237, 3, 5, 0.35), rgba(255, 255, 255, 0.05));
  --grad-text-glow: linear-gradient(90deg, #ed0305 0%, #ff5254 50%, #ed0305 100%);

  /* Shadows & Glows */
  --shadow-sm: 0 4px 14px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 10px 30px rgba(0, 0, 0, 0.55);
  --shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.7);
  --glow-red-sm: 0 0 20px rgba(237, 3, 5, 0.35);
  --glow-red-md: 0 8px 30px rgba(237, 3, 5, 0.48);
  --glow-red-lg: 0 16px 50px rgba(237, 3, 5, 0.62);

  /* Typography */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  /* Layout */
  --container-max: 1180px;
  --nav-height: 84px;

  /* Transitions & Timing */
  --ease-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275);
  --ease-smooth: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --duration-fast: 0.2s;
  --duration-norm: 0.35s;
  --duration-slow: 0.7s;
}