/* ===== M&M Pad Design Tokens ===== */
:root {
  /* Color Palette — Dark heroic theme (Megamerica) */
  --clr-bg:           #0f1117;
  --clr-bg-alt:       #181b24;
  --clr-surface:      #1e2230;
  --clr-surface-alt:  #262b3a;
  --clr-border:       #2e3448;
  --clr-border-light: #3a4158;

  --clr-text:         #e2e4ea;
  --clr-text-muted:   #8b90a0;
  --clr-text-dim:     #5c6178;

  --clr-accent:       #5b8af5;
  --clr-accent-hover: #7ca3ff;
  --clr-accent-dim:   #3a5db0;

  --clr-danger:       #f55b5b;
  --clr-danger-hover: #ff7a7a;
  --clr-warning:      #f5b95b;
  --clr-success:      #5bf5a0;
  --clr-info:         #5bc8f5;

  /* Hero / Villain tag colors */
  --clr-hero:         #5bf5a0;
  --clr-villain:      #f55b5b;
  --clr-npc:          #f5b95b;

  /* Hero banner gradient vars (theme-adaptive) */
  --hb-name-grad:     linear-gradient(135deg, #ffffff 0%, #a8c0ff 40%, #5b8af5 100%);
  --hb-app-grad:      linear-gradient(135deg, #5bf5a0 0%, #5bc8f5 50%, #5b8af5 100%);
  --hb-name-glow:     rgba(91,138,245,0.45);
  --hb-name-glow-lo:  rgba(91,138,245,0.35);
  --hb-name-glow-hi:  rgba(124,163,255,0.7);
  --hb-app-glow:      rgba(91,245,160,0.35);
  --hb-orb1:          rgba(91,138,245,0.22);
  --hb-orb2:          rgba(91,245,160,0.15);
  --hb-orb3:          rgba(196,91,245,0.12);
  --hb-pill-glow:     rgba(91,138,245,0.25);
  --hb-lightning:     #f5b95b;
  --hb-particle-colors: #5b8af5, #7ca3ff, #5bf5a0, #f5b95b, #f55b5b, #5bc8f5, #c45bf5;

  /* Glow for interactive elements */
  --shadow-glow: 0 0 20px rgba(91,138,245,0.15);

  /* Typography */
  --font-main:  'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-mono:  'Cascadia Code', 'Fira Code', 'Consolas', monospace;

  --fs-xs:   0.7rem;
  --fs-sm:   0.8rem;
  --fs-base: 0.95rem;
  --fs-md:   1.1rem;
  --fs-lg:   1.35rem;
  --fs-xl:   1.7rem;
  --fs-xxl:  2.2rem;

  --fw-normal:  400;
  --fw-medium:  500;
  --fw-bold:    700;

  /* Spacing scale */
  --sp-xs:  0.25rem;
  --sp-sm:  0.5rem;
  --sp-md:  0.75rem;
  --sp-lg:  1rem;
  --sp-xl:  1.5rem;
  --sp-xxl: 2rem;
  --sp-3xl: 3rem;

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

  /* 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 24px rgba(0,0,0,0.5);

  /* Layout */
  --sidebar-width: 240px;
  --sidebar-collapsed: 60px;
  --topbar-height: 56px;

  /* Transitions */
  --tr-fast: 0.15s ease;
  --tr-base: 0.25s ease;
  --tr-slow: 0.4s ease;

  /* Z-index layers */
  --z-sidebar:  100;
  --z-overlay:  90;
  --z-topbar:   80;
  --z-modal:    200;
  --z-toast:    300;
}

/* ─── Theme: Hub (Charcoal + Orange) ─── */
[data-theme="hub"] {
  --clr-bg:           #121212;
  --clr-bg-alt:       #1a1a1a;
  --clr-surface:      #222222;
  --clr-surface-alt:  #2c2c2c;
  --clr-border:       #3a3a3a;
  --clr-border-light: #4a4a4a;

  --clr-text:         #e8e0d8;
  --clr-text-muted:   #a09488;
  --clr-text-dim:     #6b6058;

  --clr-accent:       #f58a2e;
  --clr-accent-hover: #ffa54e;
  --clr-accent-dim:   #b06420;

  --clr-danger:       #e85454;
  --clr-danger-hover: #ff6e6e;
  --clr-warning:      #f5c542;
  --clr-success:      #6ecf6e;
  --clr-info:         #52aad4;

  --clr-hero:         #6ecf6e;
  --clr-villain:      #e85454;
  --clr-npc:          #f5c542;

  --hb-name-grad:     linear-gradient(135deg, #ffffff 0%, #ffd4a8 40%, #f58a2e 100%);
  --hb-app-grad:      linear-gradient(135deg, #ffc266 0%, #ff8533 50%, #cc5500 100%);
  --hb-name-glow:     rgba(245,138,46,0.45);
  --hb-name-glow-lo:  rgba(245,138,46,0.35);
  --hb-name-glow-hi:  rgba(255,165,78,0.7);
  --hb-app-glow:      rgba(255,194,102,0.35);
  --hb-orb1:          rgba(245,138,46,0.22);
  --hb-orb2:          rgba(255,165,78,0.15);
  --hb-orb3:          rgba(245,197,66,0.12);
  --hb-pill-glow:     rgba(245,138,46,0.25);
  --hb-lightning:     #f5c542;
  --hb-particle-colors: #f58a2e, #ffa54e, #f5c542, #ff6633, #e85454, #52aad4, #ffd4a8;

  --shadow-glow: 0 0 20px rgba(245,138,46,0.15);
}

/* ─── Theme: Kyber (Purple + Yellow) ─── */
[data-theme="kyber"] {
  --clr-bg:           #0e0b18;
  --clr-bg-alt:       #161225;
  --clr-surface:      #1e1832;
  --clr-surface-alt:  #28203e;
  --clr-border:       #362d52;
  --clr-border-light: #483e6a;

  --clr-text:         #e8e2f4;
  --clr-text-muted:   #9b8fb8;
  --clr-text-dim:     #6b5f88;

  --clr-accent:       #a855f7;
  --clr-accent-hover: #c084fc;
  --clr-accent-dim:   #7c3aed;

  --clr-danger:       #f43f5e;
  --clr-danger-hover: #fb7185;
  --clr-warning:      #facc15;
  --clr-success:      #4ade80;
  --clr-info:         #818cf8;

  --clr-hero:         #4ade80;
  --clr-villain:      #f43f5e;
  --clr-npc:          #facc15;

  --hb-name-grad:     linear-gradient(135deg, #ffffff 0%, #d8b4fe 40%, #a855f7 100%);
  --hb-app-grad:      linear-gradient(135deg, #fde68a 0%, #facc15 50%, #eab308 100%);
  --hb-name-glow:     rgba(168,85,247,0.50);
  --hb-name-glow-lo:  rgba(168,85,247,0.35);
  --hb-name-glow-hi:  rgba(192,132,252,0.7);
  --hb-app-glow:      rgba(250,204,21,0.40);
  --hb-orb1:          rgba(168,85,247,0.25);
  --hb-orb2:          rgba(250,204,21,0.15);
  --hb-orb3:          rgba(129,140,248,0.14);
  --hb-pill-glow:     rgba(168,85,247,0.25);
  --hb-lightning:     #facc15;
  --hb-particle-colors: #a855f7, #c084fc, #facc15, #fde68a, #f43f5e, #818cf8, #4ade80;

  --shadow-glow: 0 0 20px rgba(168,85,247,0.15);
}

/* ─── Theme: Mono (Greyscale) ─── */
[data-theme="mono"] {
  --clr-bg:           #101010;
  --clr-bg-alt:       #181818;
  --clr-surface:      #212121;
  --clr-surface-alt:  #2a2a2a;
  --clr-border:       #383838;
  --clr-border-light: #484848;

  --clr-text:         #e0e0e0;
  --clr-text-muted:   #999999;
  --clr-text-dim:     #666666;

  --clr-accent:       #b0b0b0;
  --clr-accent-hover: #d0d0d0;
  --clr-accent-dim:   #808080;

  --clr-danger:       #d06060;
  --clr-danger-hover: #e08080;
  --clr-warning:      #c8b050;
  --clr-success:      #70b870;
  --clr-info:         #80a8c8;

  --clr-hero:         #70b870;
  --clr-villain:      #d06060;
  --clr-npc:          #c8b050;

  --hb-name-grad:     linear-gradient(135deg, #ffffff 0%, #cccccc 40%, #999999 100%);
  --hb-app-grad:      linear-gradient(135deg, #d0d0d0 0%, #a0a0a0 50%, #707070 100%);
  --hb-name-glow:     rgba(200,200,200,0.35);
  --hb-name-glow-lo:  rgba(180,180,180,0.25);
  --hb-name-glow-hi:  rgba(220,220,220,0.55);
  --hb-app-glow:      rgba(176,176,176,0.30);
  --hb-orb1:          rgba(200,200,200,0.12);
  --hb-orb2:          rgba(160,160,160,0.10);
  --hb-orb3:          rgba(140,140,140,0.08);
  --hb-pill-glow:     rgba(176,176,176,0.20);
  --hb-lightning:     #c8b050;
  --hb-particle-colors: #b0b0b0, #cccccc, #888888, #999999, #aaaaaa, #777777, #d0d0d0;

  --shadow-glow: 0 0 20px rgba(176,176,176,0.10);
}