/* CineAsset Hub - Cinema & Film Suite Design Tokens & Core Variables
   Styles: Midnight Screening (Dark) & Golden Era Matinee / Director's Archival (Light)
*/
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400;1,600&family=Manrope:wght@300;400;500;600;700&family=Space+Mono:ital,wght@0,400;0,700;1,400&family=JetBrains+Mono:wght@400;500;600;700&family=Inter:wght@400;500;600&display=swap');

:root {
  /* Color Mode Flag */
  --theme-mode: 'dark';

  /* Surface & Base - Midnight Screening / Cinema Nocturne */
  --hub-bg-base: #0b0a10;              /* Pure light-trap velvet black */
  --hub-bg-canvas: #100f17;            /* Deep auditorium background */
  --hub-bg-surface: #14121a;           /* Machined console & stage cards */
  --hub-bg-surface-hover: #1e1b26;     /* Elevated velvet highlight */
  --hub-bg-glass: rgba(16, 15, 23, 0.82);
  --hub-bg-glass-card: rgba(20, 18, 26, 0.72);
  --hub-bg-input: #0e0d14;
  --hub-bg-recessed: #08070c;

  /* Borders & Dividers */
  --hub-border-subtle: rgba(229, 169, 60, 0.14);
  --hub-border-medium: #2a2536;
  --hub-border-glow: rgba(229, 169, 60, 0.35);
  --hub-border-focus: #e5a93c;
  --hub-border-active: rgba(255, 200, 87, 0.35);

  /* Cinema Optical Accents */
  --hub-accent-primary: #e5a93c;       /* Tungsten Projector Amber */
  --hub-accent-primary-hover: #f5b74c;
  --hub-accent-secondary: #ffc857;     /* Champagne Brass Highlight */
  --hub-accent-tally: #e53935;         /* Camera Recording Crimson Tally */
  --hub-accent-tally-glow: rgba(229, 57, 53, 0.35);
  --hub-accent-cyan: #38bdf8;          /* Lens Coating Flare Cyan */
  --hub-accent-rose: #e53935;          /* Direct Action Red */
  --hub-accent-amber: #e5a93c;         /* Projector Arc */
  --hub-accent-success: #10b981;       /* Film Sound Sync Green */

  /* Gradients */
  --hub-accent-gradient: linear-gradient(135deg, #ffc857 0%, #e5a93c 45%, #b37b1b 100%);
  --hub-accent-gradient-glow: linear-gradient(135deg, rgba(229, 169, 60, 0.2), rgba(255, 200, 87, 0.1));
  --hub-projector-glow: radial-gradient(circle at 50% 0%, rgba(229, 169, 60, 0.18) 0%, rgba(11, 10, 16, 0) 70%);

  /* Text & Telemetry */
  --hub-text-primary: #f5f3fa;         /* Projection High Lux White */
  --hub-text-secondary: #9d8f7c;       /* Polished Brass Muted */
  --hub-text-muted: #6c6677;          /* Shutter Telemetry Grey */
  --hub-text-inverted: #0b0a10;
  --hub-text-gold: #ffc857;

  /* Typography */
  --font-display: 'Playfair Display', Georgia, serif;
  --font-body: 'Manrope', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'Space Mono', 'JetBrains Mono', monospace;
  --font-telemetry: 'JetBrains Mono', 'Space Mono', monospace;

  /* Radius (Cinematic Machined Corners) */
  --hub-radius-sm: 4px;
  --hub-radius-md: 8px;
  --hub-radius-lg: 12px;
  --hub-radius-full: 9999px;

  /* Shadows & Optical Halations */
  --hub-shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.5);
  --hub-shadow-md: 0 10px 30px -5px rgba(0, 0, 0, 0.65);
  --hub-shadow-lg: 0 20px 50px -10px rgba(0, 0, 0, 0.85);
  --hub-shadow-glow: 0 0 24px rgba(229, 169, 60, 0.28);
  --hub-shadow-glow-rose: 0 0 24px rgba(229, 57, 53, 0.35);

  /* Film Sprocket Perforation Variables */
  --film-sprocket-bg: #07060a;
  --film-sprocket-hole: #000000;
  --film-sprocket-border: rgba(229, 169, 60, 0.2);

  /* Glassmorphism Blur */
  --hub-blur-sm: blur(8px);
  --hub-blur-md: blur(16px);
  --hub-blur-lg: blur(24px);

  /* Transitions */
  --hub-transition-fast: 0.15s cubic-bezier(0.16, 1, 0.3, 1);
  --hub-transition-smooth: 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  --hub-transition-bounce: 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Platform Brand Colors */
  --brand-youtube: #ff0000;
  --brand-tiktok: #00f2fe;
  --brand-instagram: #e1306c;
  --brand-x: #ffffff;
  --brand-twitch: #9146ff;
  --brand-kick: #53fc18;
  --brand-reddit: #ff4500;
  --brand-discord: #5865f2;
  --brand-facebook: #1877f2;
}

/* ==========================================================================
   Light Mode: Golden Era Matinee / Director's Archival
   ========================================================================== */
[data-theme="light"] {
  --theme-mode: 'light';

  /* Surface & Base - Warm Alabaster Script Parchment */
  --hub-bg-base: #f8f5ee;              /* Alabaster cold-pressed paper bed */
  --hub-bg-canvas: #f2eee3;            /* Elevated studio script floor */
  --hub-bg-surface: #efece3;           /* Heavy linen board card tier */
  --hub-bg-surface-hover: #e5e1d5;     /* Recessed fiberboard */
  --hub-bg-glass: rgba(248, 245, 238, 0.9);
  --hub-bg-glass-card: rgba(239, 236, 227, 0.85);
  --hub-bg-input: #e5e1d5;
  --hub-bg-recessed: #ded9cb;

  /* Borders & Dividers */
  --hub-border-subtle: #d4cebf;
  --hub-border-medium: rgba(179, 123, 27, 0.3);
  --hub-border-glow: rgba(179, 123, 27, 0.35);
  --hub-border-focus: #b37b1b;
  --hub-border-active: #95620f;

  /* Archival Tooling Accents */
  --hub-accent-primary: #b37b1b;       /* Antique Polished Brass */
  --hub-accent-primary-hover: #95620f;
  --hub-accent-secondary: #825500;     /* Burnished Gold */
  --hub-accent-tally: #b71c1c;         /* Clapperboard Crimson */
  --hub-accent-tally-glow: rgba(183, 28, 28, 0.28);
  --hub-accent-cyan: #0284c7;          /* Archival Blue Ink */
  --hub-accent-rose: #b71c1c;
  --hub-accent-amber: #b37b1b;
  --hub-accent-success: #15803d;

  /* Gradients */
  --hub-accent-gradient: linear-gradient(135deg, #c88e28 0%, #b37b1b 50%, #825500 100%);
  --hub-accent-gradient-glow: linear-gradient(135deg, rgba(179, 123, 27, 0.12), rgba(200, 142, 40, 0.08));
  --hub-projector-glow: radial-gradient(circle at 50% 0%, rgba(179, 123, 27, 0.12) 0%, rgba(248, 245, 238, 0) 70%);

  /* Text & Telemetry (Deep Espresso Ink) */
  --hub-text-primary: #1c1612;         /* Deep Carbon Espresso Ink */
  --hub-text-secondary: #4a3e35;       /* Warm Walnut Editorial */
  --hub-text-muted: #7f756f;          /* Weathered Notation Lead */
  --hub-text-inverted: #f8f5ee;
  --hub-text-gold: #95620f;

  /* Shadows (Tactile Debossing & Warm Walnut Casts) */
  --hub-shadow-sm: 0 1px 3px rgba(28, 22, 18, 0.06), 0 4px 10px rgba(28, 22, 18, 0.04);
  --hub-shadow-md: 0 4px 16px rgba(28, 22, 18, 0.08), 0 8px 24px rgba(28, 22, 18, 0.05);
  --hub-shadow-lg: 0 12px 36px rgba(28, 22, 18, 0.12), 0 2px 8px rgba(28, 22, 18, 0.06);
  --hub-shadow-glow: 0 0 20px rgba(179, 123, 27, 0.22);
  --hub-shadow-glow-rose: 0 0 20px rgba(183, 28, 28, 0.25);

  /* Film Sprocket Perforation Variables */
  --film-sprocket-bg: #e5e1d5;
  --film-sprocket-hole: #cfc9bd;
  --film-sprocket-border: #b37b1b44;
}