/* ===== Variables — Line & Lore Studio ===== */
:root {
  /* Brand Colors */
  --color-primary: #0D0D0D;
  --color-primary-light: #1A1A1A;
  --color-primary-lighter: #2A2A2A;
  --color-secondary: #1A1A2E;
  --color-accent: #C41E1E;
  --color-accent-light: #E8492A;
  --color-accent-dark: #A01010;

  /* Neutrals */
  --color-white: #FFFFFF;
  --color-light: #F5F0EB;
  --color-gray-100: #E8E3DE;
  --color-gray-200: #C4BFBA;
  --color-gray-300: #9E9994;
  --color-gray-400: #7A7570;
  --color-gray-500: #5A5550;
  --color-gray-600: #3A3530;
  --color-dark: #1A1510;

  /* Text */
  --text-primary: #F5F0EB;
  --text-secondary: #C4BFBA;
  --text-muted: #9E9994;
  --text-on-accent: #FFFFFF;

  /* Fonts */
  --font-heading: 'Bebas Neue', sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

  /* Spacing */
  --section-padding: 100px 0;
  --section-padding-mobile: 60px 0;
  --container-max: 1200px;
  --container-padding: 0 24px;

  /* Border Radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-xl: 24px;

  /* Transitions */
  --transition-fast: 0.2s ease;
  --transition-base: 0.3s ease;
  --transition-slow: 0.5s ease;

  /* Shadows */
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.3);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.4);
  --shadow-lg: 0 8px 32px rgba(0,0,0,0.5);
  --shadow-glow: 0 0 10px rgba(196,30,30,0.3);
  --shadow-glow-md: 0 0 20px rgba(196,30,30,0.4);

  /* Glow Effects */
  --glow-accent: 0 0 15px rgba(196,30,30,0.4);
  --glow-accent-sm: 0 0 8px rgba(196,30,30,0.3);

  /* Z-index */
  --z-nav: 1000;
  --z-overlay: 999;
  --z-modal: 1100;
  --size-hero-h1: clamp(3.5rem, 9vw, 9rem);
}

/* Dark theme baseline */
html { background: var(--color-primary); color: var(--text-primary); }