/* ============================================================
   PizzaLayer Site — Design Tokens & Variables
   ============================================================ */

:root {
  /* Brand Colors */
  --orange:        #ff6b35;
  --orange-light:  #ff8c5a;
  --orange-glow:   rgba(255, 107, 53, 0.35);
  --orange-dim:    rgba(255, 107, 53, 0.12);

  /* Dark Palette */
  --void:          #06050a;
  --deep:          #0d0b14;
  --dark:          #13101e;
  --panel:         #1a1628;
  --card:          #201c30;
  --border:        rgba(255,255,255,0.08);
  --border-bright: rgba(255,255,255,0.14);
  --border-orange: rgba(255, 107, 53, 0.3);

  /* Light Palette */
  --light-bg:      #f4f2f8;
  --light-surface: #ffffff;
  --light-card:    #faf9fc;
  --light-border:  rgba(13, 11, 20, 0.1);

  /* Text */
  --text-primary:   #f0edf8;
  --text-secondary: rgba(240, 237, 248, 0.72);  /* was 0.65 — raised for AA on dark bg */
  --text-muted:     rgba(240, 237, 248, 0.42);  /* decorative/placeholder use only */
  --text-dark:      #13101e;
  --text-dark-sub:  rgba(19, 16, 30, 0.70);     /* was 0.60 — raised for AA on light bg (#f4f2f8) */
  --text-dark-mute: rgba(19, 16, 30, 0.42);     /* decorative/placeholder use only */

  /* Gradients */
  --grad-hero:     linear-gradient(135deg, #06050a 0%, #0d0b14 40%, #1a0d28 75%, #0f0a1a 100%);
  --grad-violet:   linear-gradient(135deg, #13101e 0%, #1e1433 50%, #0d0b14 100%);
  --grad-card:     linear-gradient(145deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.02) 100%);
  --grad-orange:   linear-gradient(135deg, #ff6b35 0%, #e8542a 100%);
  --grad-section:  linear-gradient(180deg, #0d0b14 0%, #13101e 100%);

  /* Glass */
  --glass-bg:      rgba(255,255,255,0.05);
  --glass-bg-med:  rgba(255,255,255,0.07);
  --glass-bg-dark: rgba(6,5,10,0.6);
  --glass-border:  rgba(255,255,255,0.1);
  --glass-blur:    blur(20px);
  --glass-blur-sm: blur(10px);

  /* Radii */
  --radius-sm:  6px;
  --radius-md:  12px;
  --radius-lg:  20px;
  --radius-xl:  32px;
  --radius-pill:9999px;

  /* Shadows */
  --shadow-card:   0 4px 32px rgba(0,0,0,0.4), 0 1px 0 rgba(255,255,255,0.06) inset;
  --shadow-orange: 0 0 40px rgba(255,107,53,0.25), 0 4px 20px rgba(0,0,0,0.4);
  --shadow-glow:   0 0 80px rgba(255,107,53,0.15);
  --shadow-lift:   0 8px 48px rgba(0,0,0,0.5);

  /* Typography */
  --font-display: 'Bungee Inline', sans-serif;
  --font-accent:  'Bungee Inline', sans-serif;
  --font-body:    'DM Sans', sans-serif;
  --font-mono:    'JetBrains Mono', monospace;
  --font-ui:      'Google Sans', 'DM Sans', sans-serif; /* toggle buttons, UI controls */

  /* Spacing */
  --inner:  1280px;
  --gutter: clamp(20px, 5vw, 60px);

  /* Transitions */
  --ease:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --fast:    0.15s;
  --mid:     0.3s;
  --slow:    0.5s;
}