/* === Raw palette MTG === */
:root {
  --mtg-orange-500: #FF8617;
  --mtg-orange-600: #FC7100;
  --mtg-orange-300: #FF9A42;

  --mtg-magenta-500: #EE2BC1;
  --mtg-magenta-700: #C71CB3;
  --mtg-magenta-300: #FF61FB;

  --mtg-cyan-500: #00B8F1;
  --mtg-cyan-700: #0099CC;
  --mtg-cyan-300: #00D5FF;

  --mtg-mint-500: #00EEB8;
  --mtg-mint-700: #00C794;
  --mtg-mint-300: #00FAE4;

  --mtg-purple-500: #A15FFF;
  --mtg-purple-700: #8436FF;
  --mtg-purple-300: #C28DFF;

  --neutral-50:  #F5F5F7;
  --neutral-100: #E8E8ED;
  --neutral-200: #C8C8D0;
  --neutral-400: #888896;
  --neutral-600: #5A5A66;
  --neutral-700: #2C2C36;
  --neutral-800: #1F1F26;
  --neutral-900: #14141A;
  --neutral-950: #0A0A0F;

  --system-yellow: #FFD23F;
  --system-red:    #FF3B30;
}

/* === Semantic colors === */
:root {
  --color-primary:        var(--mtg-orange-500);
  --color-primary-hover:  var(--mtg-orange-600);
  --color-secondary:      var(--mtg-magenta-500);
  --color-info:           var(--mtg-cyan-500);
  --color-success:        var(--mtg-mint-500);
  --color-warning:        var(--system-yellow);
  --color-danger:         var(--system-red);
}

/* === Theme tokens === */
/* Light — default (sem seletor) */
:root {
  --bg:            #FFFFFF;
  --bg-elevated:   var(--neutral-50);
  --bg-overlay:    var(--neutral-100);
  --border:        var(--neutral-100);
  --border-strong: var(--neutral-200);
  --fg:            var(--neutral-950);
  --fg-muted:      var(--neutral-600);
  --fg-subtle:     var(--neutral-400);
  --on-primary:    var(--neutral-950);
  --on-secondary:  #FFFFFF;
}

/* Dark — override */
[data-theme='dark'] {
  --bg:            var(--neutral-950);
  --bg-elevated:   var(--neutral-900);
  --bg-overlay:    var(--neutral-800);
  --border:        var(--neutral-800);
  --border-strong: var(--neutral-700);
  --fg:            var(--neutral-50);
  --fg-muted:      var(--neutral-400);
  --fg-subtle:     var(--neutral-600);
  --on-primary:    var(--neutral-950);
  --on-secondary:  #FFFFFF;
}

/* === Typography === */
:root {
  --font-family: 'Space Grotesk', system-ui, -apple-system, sans-serif;

  --font-size-xs:   12px;
  --font-size-sm:   14px;
  --font-size-base: 16px;
  --font-size-md:   18px;
  --font-size-lg:   22px;
  --font-size-xl:   28px;
  --font-size-2xl:  36px;
  --font-size-3xl:  48px;

  --font-weight-light:    300;
  --font-weight-regular:  400;
  --font-weight-medium:   500;
  --font-weight-semibold: 600;
  --font-weight-bold:     700;

  --line-height-tight:  1.1;
  --line-height-snug:   1.3;
  --line-height-normal: 1.5;

  --letter-spacing-tight: -0.02em;
  --letter-spacing-wide:  0.05em;
}

/* === Spacing === */
:root {
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
}

/* === Radius === */
:root {
  --radius-xs:   4px;
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   16px;
  --radius-xl:   20px;
  --radius-2xl:  28px;
  --radius-full: 9999px;
}

/* === Shadows === */
/* Light — default */
:root {
  --shadow-sm:  0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow-md:  0 4px 12px rgba(0, 0, 0, 0.08);
  --shadow-lg:  0 12px 32px rgba(0, 0, 0, 0.1);
  --shadow-glow-primary:   0 8px 24px rgba(255, 134, 23, 0.35);
  --shadow-glow-secondary: 0 8px 24px rgba(238, 43, 193, 0.35);
}
/* Dark — override */
[data-theme='dark'] {
  --shadow-sm:  0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md:  0 4px 12px rgba(0, 0, 0, 0.5);
  --shadow-lg:  0 12px 32px rgba(0, 0, 0, 0.6);
}

/* === Gradients === */
:root {
  --gradient-primary:    linear-gradient(135deg, var(--mtg-orange-500) 0%, var(--mtg-magenta-500) 100%);
  --gradient-secondary:  linear-gradient(135deg, var(--mtg-cyan-500) 0%, var(--mtg-mint-500) 100%);
  --gradient-accent:     linear-gradient(135deg, var(--mtg-magenta-500) 0%, var(--mtg-purple-500) 100%);
  --gradient-warm:       linear-gradient(135deg, var(--mtg-orange-300) 0%, var(--mtg-orange-600) 100%);
}

/* === Student panel tokens (added 2026-05-11) === */
/* Light — default */
:root {
  /* Layout */
  --sidebar-w-rail: 64px;
  --sidebar-w-expanded: 240px;
  --topbar-h: 56px;

  /* Surfaces (light) */
  --surface-1: #ffffff;
  --surface-2: #f8fafc;
  --surface-3: #f1f5f9;

  /* Borders */
  --border-1: #e2e8f0;
  --border-2: #cbd5e1;

  /* Accent (light) */
  --accent-1: #6366f1;
  --accent-2: #8b5cf6;
  --accent-soft: rgba(99, 102, 241, 0.08);

  /* Data viz palette (light — saturação WCAG AA) */
  --data-1: #6366f1;
  --data-2: #8b5cf6;
  --data-3: #ec4899;
  --data-4: #f59e0b;
  --data-5: #10b981;
  --data-6: #06b6d4;
}

/* Dark — override */
[data-theme='dark'] {
  /* Surfaces (dark) */
  --surface-1: #18181b;
  --surface-2: #1f1f23;
  --surface-3: #27272a;

  /* Borders */
  --border-1: #2d2d33;
  --border-2: #3a3a42;

  /* Accent (dark) */
  --accent-1: #818cf8;
  --accent-2: #a78bfa;
  --accent-soft: rgba(129, 140, 248, 0.12);

  /* Data viz palette (dark — vibrante) */
  --data-1: #818cf8;
  --data-2: #a78bfa;
  --data-3: #f472b6;
  --data-4: #fbbf24;
  --data-5: #34d399;
  --data-6: #22d3ee;
}