/* ==========================================================================
   LES MOISSONNEURS - DESIGN TOKENS & CSS VARIABLES
   ========================================================================== */

:root {
  /* Main Backgrounds */
  --bg-primary: #11141a;          /* Soft midnight slate (replaces pitch black) */
  --bg-surface: #191e28;          /* Cards and containers */
  --bg-elevated: #222836;         /* Elevated surfaces, hover states, inputs */

  /* Wine / Red Spotlight Gradients */
  --gradient-spotlight: linear-gradient(180deg, #2b131e 0%, #171a23 100%);
  --gradient-card: linear-gradient(145deg, #1b202c, #13161e);
  
  /* Typography */
  --text-primary: #f8fafc;        /* High-contrast soft white */
  --text-secondary: #cbd5e1;      /* Crisp readable muted text (lightened for readability) */
  --text-muted: #94a3b8;          /* Subtle metadata / footnotes */
  
  /* Accents & Borders */
  --color-gold: #f59e0b;          /* Vibrant Gospelness Gold */
  --color-gold-light: #fbbf24;    /* Light Gold Highlight */
  --border-subtle: rgba(245, 158, 11, 0.2);
  --border-card: rgba(255, 255, 255, 0.08);

  /* Brand Color Palette */
  --color-primary: #8B1E2D;           /* Deep Burgundy / Crimson */
  --color-primary-dark: #4A0E17;      /* Dark Wine / Black-Red */
  --color-primary-light: #B22B3F;     /* Vibrant Crimson */
  --color-accent-gold: var(--color-gold);       /* Radiant Gospelness Gold */
  --color-accent-gold-alt: var(--color-gold-light);   /* Warm Amber Gold */
  --color-accent-gold-glow: rgba(245, 158, 11, 0.35);
  --color-accent-orange: #E65100;     /* Poster Accent Orange */
  
  /* Backgrounds & Surfaces (Aliased for backward compatibility) */
  --color-bg-dark: var(--bg-primary);          /* Soft Midnight Slate */
  --color-bg-alt: #161b24;                     /* Secondary Dark Slate */
  --color-bg-card: var(--bg-surface);          /* Card surface */
  --color-bg-card-hover: var(--bg-elevated);   /* Card hover state */
  --color-bg-glass: rgba(25, 30, 40, 0.75);
  --color-bg-glass-heavy: rgba(17, 20, 26, 0.88);
  --color-bg-input: var(--bg-elevated);

  /* Typography Colors (Aliased for backward compatibility) */
  --color-text-main: var(--text-primary);        /* Soft White */
  --color-text-muted: var(--text-secondary);     /* Slate / Grey Subtitle */
  --color-text-dim: var(--text-muted);           /* Subtle Footnotes */
  --color-white: #FFFFFF;

  /* Borders & Dividers */
  --color-border: var(--border-card);
  --color-border-hover: rgba(245, 158, 11, 0.3);
  --color-border-gold: var(--border-subtle);
  --color-border-subtle: var(--border-subtle);

  /* Gradients */
  --gradient-gold: linear-gradient(135deg, #fbbf24 0%, #f59e0b 50%, #d97706 100%);
  --gradient-gold-warm: linear-gradient(135deg, #fbbf24 0%, #e65100 100%);
  --gradient-burgundy: linear-gradient(135deg, #8B1E2D 0%, #4A0E17 100%);
  --gradient-card-border: linear-gradient(135deg, rgba(245, 158, 11, 0.6) 0%, rgba(139, 30, 45, 0.4) 50%, rgba(255, 255, 255, 0.05) 100%);
  --gradient-dark-overlay: linear-gradient(180deg, rgba(17, 20, 26, 0.4) 0%, rgba(17, 20, 26, 0.95) 100%);
  --gradient-hero-overlay: linear-gradient(to bottom, rgba(17, 20, 26, 0.3) 0%, rgba(17, 20, 26, 0.85) 75%, #11141a 100%);

  /* Typography */
  --font-heading: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-serif: 'Cinzel', Georgia, serif;
  --font-body: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* Font Weights */
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-black: 800;

  /* Spacing Scale */
  --space-2xs: 0.25rem;
  --space-xs: 0.5rem;
  --space-sm: 0.75rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: 4.5rem;
  --space-4xl: 6rem;

  /* Layout Containers */
  --container-width: 1200px;
  --container-narrow: 840px;
  --container-wide: 1400px;
  --header-height: 96px;

  /* Border Radii */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-xl: 24px;
  --radius-full: 9999px;

  /* Shadows & Glows */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.6);
  --shadow-gold: 0 0 30px rgba(245, 158, 11, 0.25);
  --shadow-gold-heavy: 0 8px 32px rgba(245, 158, 11, 0.4);
  --shadow-burgundy: 0 8px 30px rgba(139, 30, 45, 0.4);

  /* Transitions */
  --transition-fast: 0.18s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-smooth: 0.45s cubic-bezier(0.16, 1, 0.3, 1);
  
  /* Z-Index Layers */
  --z-base: 1;
  --z-sticky: 100;
  --z-drawer: 500;
  --z-modal: 1000;
  --z-toast: 2000;
}