@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;500;600;700;800;900&family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap');

/* ====================================================================
   MAGIC SPIN CRYPTO MINING - DESIGN TOKENS
   Strict Dark Luxury / Red Accent Theme (No green branding / No generic gradients)
   ==================================================================== */

:root {
  /* Surface & Background Colors */
  --black-absolute: #000000;
  --black-primary: #050505;
  --black-secondary: #0A0A0B;
  --surface-primary: #101012;
  --surface-secondary: #151517;
  --surface-elevated: #1B1B1E;
  --surface-hover: #222226;
  --surface-active: #2A2A30;

  /* Brand Accents (Controlled Luxury Red) */
  --red-primary: #E10600;
  --red-bright: #FF2D2D;
  --red-dark: #8F0805;
  --red-soft: rgba(225, 6, 0, 0.12);
  --red-soft-hover: rgba(225, 6, 0, 0.20);
  --red-border: rgba(255, 45, 45, 0.32);
  --red-glow: 0 0 20px rgba(225, 6, 0, 0.25);

  /* Typography & Neutral Content */
  --white-primary: #F5F5F5;
  --white-secondary: #D7D7DA;
  --gray-primary: #9A9AA1;
  --gray-secondary: #68686F;
  --gray-muted: #48484F;
  --border-dark: #29292E;
  --border-subtle: #1F1F24;

  /* Status Colors (Semantic Only) */
  --success: #21C77A;
  --success-soft: rgba(33, 199, 122, 0.12);
  --warning: #F3AA3D;
  --warning-soft: rgba(243, 170, 61, 0.12);
  --error: #FF4D4D;
  --error-soft: rgba(255, 77, 77, 0.12);
  --information: #5C8DFF;
  --information-soft: rgba(92, 141, 255, 0.12);

  /* Typography Fonts */
  --font-heading: "Cinzel", "Times New Roman", serif;
  --font-main: "Cinzel", "Plus Jakarta Sans", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace;

  /* Elevation Shadows */
  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.5);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.7);
  --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.85);

  /* Border Radii */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-pill: 9999px;

  /* Layout Widths */
  --sidebar-width: 260px;
  --topbar-height: 70px;
  --container-max: 1320px;
}

/* ====================================================================
   DYNAMIC THEME VARIATIONS (CLIENT COLOR SELECTION ENGINE)
   ==================================================================== */

/* --- 1. IMPERIAL GOLD (LUXURY BITCOIN & WEALTH - RECOMMENDED) --- */
[data-theme="gold"], html[data-theme="gold"] {
  --red-primary: #E5A91E;
  --red-bright: #FFCA36;
  --red-dark: #A3740D;
  --red-soft: rgba(229, 169, 30, 0.15);
  --red-soft-hover: rgba(229, 169, 30, 0.25);
  --red-border: rgba(255, 202, 54, 0.40);
  --red-glow: 0 0 24px rgba(229, 169, 30, 0.35);

  --black-primary: #0A0907;
  --black-secondary: #110F0B;
  --surface-primary: #171510;
  --surface-secondary: #1E1B15;
  --surface-elevated: #26221A;
  --surface-hover: #312B20;
  --surface-active: #3C3527;
  --border-dark: #383020;
  --border-subtle: #241F15;
}

/* --- 2. ELECTRIC CYAN / WEB3 BLUE (MODERN TECH & ETHEREUM) --- */
[data-theme="blue"], html[data-theme="blue"] {
  --red-primary: #007CE0;
  --red-bright: #00D2FF;
  --red-dark: #005299;
  --red-soft: rgba(0, 210, 255, 0.14);
  --red-soft-hover: rgba(0, 210, 255, 0.24);
  --red-border: rgba(0, 210, 255, 0.38);
  --red-glow: 0 0 24px rgba(0, 210, 255, 0.35);

  --black-primary: #05080E;
  --black-secondary: #0A0F1A;
  --surface-primary: #0F1726;
  --surface-secondary: #151F33;
  --surface-elevated: #1B2740;
  --surface-hover: #233454;
  --surface-active: #2C4169;
  --border-dark: #1E3352;
  --border-subtle: #132236;
}

/* --- 3. EMERALD CRYPTO GREEN (PROFIT, ROI & MINING) --- */
[data-theme="green"], html[data-theme="green"] {
  --red-primary: #05C978;
  --red-bright: #00F298;
  --red-dark: #038A52;
  --red-soft: rgba(0, 242, 152, 0.14);
  --red-soft-hover: rgba(0, 242, 152, 0.24);
  --red-border: rgba(0, 242, 152, 0.38);
  --red-glow: 0 0 24px rgba(0, 242, 152, 0.35);

  --black-primary: #050806;
  --black-secondary: #090F0C;
  --surface-primary: #0E1712;
  --surface-secondary: #14211A;
  --surface-elevated: #1B2B22;
  --surface-hover: #23382D;
  --surface-active: #2C4638;
  --border-dark: #1F382B;
  --border-subtle: #13241C;
}

/* --- 4. CYBER AMETHYST (SOLANA & METAVERSE VIP) --- */
[data-theme="purple"], html[data-theme="purple"] {
  --red-primary: #9D4EDD;
  --red-bright: #C77DFF;
  --red-dark: #6A1FB8;
  --red-soft: rgba(199, 125, 255, 0.14);
  --red-soft-hover: rgba(199, 125, 255, 0.24);
  --red-border: rgba(199, 125, 255, 0.40);
  --red-glow: 0 0 24px rgba(199, 125, 255, 0.35);

  --black-primary: #07050A;
  --black-secondary: #0D0A14;
  --surface-primary: #140E20;
  --surface-secondary: #1B132A;
  --surface-elevated: #241A38;
  --surface-hover: #2E2147;
  --surface-active: #392A57;
  --border-dark: #362254;
  --border-subtle: #241638;
}

/* --- 5. CRIMSON RED (ORIGINAL CLASSIC EDITION) --- */
[data-theme="red"], html[data-theme="red"] {
  --red-primary: #E10600;
  --red-bright: #FF2D2D;
  --red-dark: #8F0805;
  --red-soft: rgba(225, 6, 0, 0.12);
  --red-soft-hover: rgba(225, 6, 0, 0.20);
  --red-border: rgba(255, 45, 45, 0.32);
  --red-glow: 0 0 20px rgba(225, 6, 0, 0.25);
}