/* ============================================
   MOVIES GAMES KAMILO — DESIGN TOKENS
   Mario Bros Inspired Gaming Premium Theme
   ============================================ */

:root {
  /* ── BRAND COLORS (Mario Bros Palette) ── */
  --red:    #E52521;
  --blue:   #0B84FF;
  --green:  #43B047;
  --yellow: #F8D210;

  --red-glow:    rgba(229, 37,  33,  0.45);
  --blue-glow:   rgba(11,  132, 255, 0.45);
  --green-glow:  rgba(67,  176, 71,  0.45);
  --yellow-glow: rgba(248, 210, 16,  0.45);

  /* ── DARK SURFACES ── */
  --bg:        #0B1021; /* Rich deep navy blue instead of black */
  --surface:   #131B33;
  --surface-2: #1C2746;
  --surface-3: #26355B;
  --surface-dark: #131B33;
  --surface-dark-2: #1C2746;
  --text:      #FFFFFF;
  --text-muted:#94A3B8;
  --border:    rgba(255,255,255,0.1);
  --border-dark: rgba(255,255,255,0.1);

  /* ── LIGHT SURFACES ── */
  --bg-light:        #E2E8F0; /* Soft cool blue/gray */
  --surface-light:   #FFFFFF;
  --surface-2-light: #F1F5F9;
  --text-light:      #0A0C12;
  --text-muted-light:#5C6080;
  --border-light:    rgba(0,0,0,0.08);

  /* Active theme tokens (dark by default) */
  --bg-t:      var(--bg);
  --surface-t: var(--surface);
  --surface-2t:var(--surface-2);
  --text-t:    var(--text);
  --muted-t:   var(--text-muted);
  --border-t:  var(--border);

  /* ── TYPOGRAPHY ── */
  --font-head: 'Sora', sans-serif;
  --font-display: 'Barlow Condensed', sans-serif;
  --font-body: 'Inter', sans-serif;

  /* ── SCALE ── */
  --r-sm:  8px;
  --r-md:  12px;
  --r-lg:  18px;
  --r-xl:  24px;
  --r-pill:9999px;

  /* ── SHADOWS / GLOWS ── */
  --glow-red:    0 0 30px var(--red-glow),    0 0 60px rgba(229,37,33,0.2);
  --glow-blue:   0 0 30px var(--blue-glow),   0 0 60px rgba(11,132,255,0.2);
  --glow-green:  0 0 30px var(--green-glow),  0 0 60px rgba(67,176,71,0.2);
  --glow-yellow: 0 0 30px var(--yellow-glow), 0 0 60px rgba(248,210,16,0.2);
  --shadow-card: 0 8px 40px rgba(0,0,0,0.4);
  --shadow-lg:   0 20px 60px rgba(0,0,0,0.5);

  /* ── GLASSMORPHISM ── */
  --glass-bg:     rgba(17,19,24,0.75);
  --glass-border: rgba(255,255,255,0.10);
  --glass-blur:   blur(20px);

  /* ── Z-INDEX ── */
  --z-header:  100;
  --z-drawer:  200;
  --z-modal:   300;
  --z-toast:   400;

  /* ── TRANSITIONS ── */
  --t-fast:   150ms ease;
  --t-normal: 300ms ease;
  --t-slow:   600ms cubic-bezier(0.16,1,0.3,1);

  /* ── LAYOUT ── */
  --max-w: 1320px;
  --header-h: 72px;
}

/* LIGHT THEME OVERRIDES */
[data-theme="light"] {
  --bg-t:      var(--bg-light);
  --surface-t: var(--surface-light);
  --surface-2t:var(--surface-2-light);
  --text-t:    var(--text-light);
  --muted-t:   var(--text-muted-light);
  --border-t:  var(--border-light);
  --glass-bg:  rgba(255,255,255,0.80);
  --glass-border: rgba(0,0,0,0.10);
  --shadow-card: 0 8px 40px rgba(0,0,0,0.10);
}