/* Orbyt Marketplace 2.0 — 16-Theme Design Tokens System
 * Matches KTools Admin Panel Theme Engine (Light, Dark, Cyber, Mint, Ocean, etc.)
 */

:root {
  /* Typography */
  --font-display: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-body: 'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', Consolas, monospace;

  /* Spacing Scale */
  --space-2xs: 4px;
  --space-xs: 8px;
  --space-sm: 12px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;

  /* Border Radii */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-xl: 24px;
  --radius-pill: 9999px;

  /* Transitions */
  --transition-fast: 0.15s cubic-bezier(0.16, 1, 0.3, 1);
  --transition-base: 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  --transition-smooth: 0.35s cubic-bezier(0.16, 1, 0.3, 1);

  /* Default Theme: Cyber (Concept 1 Default) */
  --color-bg: #070b12;
  --color-surface: #0d1422;
  --color-surface-hover: #131d31;
  --color-card: #111a2c;
  --color-card-elevated: #16233b;
  --color-border: rgba(255, 255, 255, 0.08);
  --color-border-glow: rgba(0, 240, 255, 0.22);
  --color-border-emerald: rgba(0, 230, 118, 0.28);

  --color-text: #e6edf8;
  --color-text-muted: #8ea1b8;
  --color-text-dim: #556982;
  --color-text-bright: #ffffff;

  --color-primary: #00e676;
  --color-primary-hover: #33eb91;
  --color-primary-glow: rgba(0, 230, 118, 0.35);

  --color-cyan: #00f0ff;
  --color-cyan-glow: rgba(0, 240, 255, 0.35);

  --color-amber: #f59e0b;
  --color-amber-glow: rgba(245, 158, 11, 0.35);

  --color-danger: #ef4444;
  --color-info: #38bdf8;
  --color-purple: #a855f7;

  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.35);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.6);
  --shadow-glow: 0 0 24px var(--color-primary-glow);
}

/* 1. Cyber (Default) */
[data-theme="cyber"] {
  --color-bg: #080c10;
  --color-surface: #0e1620;
  --color-card: #121c2a;
  --color-card-elevated: #182536;
  --color-primary: #00d4ff;
  --color-primary-glow: rgba(0, 212, 255, 0.35);
  --color-cyan: #00d4ff;
  --color-border-emerald: rgba(0, 212, 255, 0.28);
}

/* 2. Light */
[data-theme="light"] {
  --color-bg: #f8fafc;
  --color-surface: #ffffff;
  --color-surface-hover: #f1f5f9;
  --color-card: #ffffff;
  --color-card-elevated: #f1f5f9;
  --color-border: #e2e8f0;
  --color-border-glow: rgba(2, 132, 199, 0.25);
  --color-border-emerald: rgba(2, 132, 199, 0.3);
  --color-text: #0f172a;
  --color-text-muted: #475569;
  --color-text-dim: #94a3b8;
  --color-text-bright: #020617;
  --color-primary: #0284c7;
  --color-primary-hover: #0369a1;
  --color-primary-glow: rgba(2, 132, 199, 0.25);
  --color-cyan: #0284c7;
  --color-amber: #d97706;
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.12);
}

/* 3. Dark */
[data-theme="dark"] {
  --color-bg: #070e1c;
  --color-surface: #0d1a33;
  --color-card: #112242;
  --color-primary: #38bdf8;
  --color-primary-glow: rgba(56, 189, 248, 0.35);
  --color-cyan: #38bdf8;
}

/* 4. Bailey */
[data-theme="bailey"] {
  --color-bg: #f5f3ff;
  --color-surface: #ffffff;
  --color-card: #ffffff;
  --color-border: #e4e4e7;
  --color-text: #18181b;
  --color-text-muted: #52525b;
  --color-text-bright: #09090b;
  --color-primary: #7c3aed;
  --color-primary-glow: rgba(124, 58, 237, 0.25);
  --color-cyan: #7c3aed;
}

/* 5. Ocean Blue */
[data-theme="ocean"] {
  --color-bg: #071526;
  --color-surface: #0d2645;
  --color-card: #10325c;
  --color-primary: #3fa9f5;
  --color-primary-glow: rgba(63, 169, 245, 0.35);
  --color-cyan: #3fa9f5;
}

/* 6. Midnight */
[data-theme="midnight"] {
  --color-bg: #070913;
  --color-surface: #0b0f1c;
  --color-card: #11172e;
  --color-primary: #7c8cf8;
  --color-primary-glow: rgba(124, 140, 248, 0.35);
  --color-cyan: #818cf8;
}

/* 7. Nord */
[data-theme="nord"] {
  --color-bg: #1e222a;
  --color-surface: #262c38;
  --color-card: #2e3545;
  --color-primary: #88c0d0;
  --color-primary-glow: rgba(136, 192, 208, 0.35);
  --color-cyan: #88c0d0;
}

/* 8. Slate */
[data-theme="slate"] {
  --color-bg: #1f2329;
  --color-surface: #282d36;
  --color-card: #323843;
  --color-primary: #7ea2c8;
  --color-primary-glow: rgba(126, 162, 200, 0.35);
  --color-cyan: #7ea2c8;
}

/* 9. Mint */
[data-theme="mint"] {
  --color-bg: #041412;
  --color-surface: #071e1c;
  --color-card: #0c2b29;
  --color-primary: #00d4be;
  --color-primary-glow: rgba(0, 212, 190, 0.35);
  --color-cyan: #00d4be;
}

/* 10. Forest */
[data-theme="forest"] {
  --color-bg: #09140b;
  --color-surface: #122015;
  --color-card: #182c1e;
  --color-primary: #5cc46e;
  --color-primary-glow: rgba(92, 196, 110, 0.35);
  --color-cyan: #5cc46e;
}

/* 11. Lavender */
[data-theme="lavender"] {
  --color-bg: #140933;
  --color-surface: #251260;
  --color-card: #321882;
  --color-primary: #b794f6;
  --color-primary-glow: rgba(183, 148, 246, 0.35);
  --color-cyan: #b794f6;
}

/* 12. Rose */
[data-theme="rose"] {
  --color-bg: #170912;
  --color-surface: #2a1220;
  --color-card: #3b192d;
  --color-primary: #f472b6;
  --color-primary-glow: rgba(244, 114, 182, 0.35);
  --color-cyan: #f472b6;
}

/* 13. Crimson */
[data-theme="crimson"] {
  --color-bg: #14050b;
  --color-surface: #1f0a12;
  --color-card: #2e0e1a;
  --color-primary: #e5485d;
  --color-primary-glow: rgba(229, 72, 93, 0.35);
  --color-cyan: #e5485d;
}

/* 14. Sunset */
[data-theme="sunset"] {
  --color-bg: #1a0d01;
  --color-surface: #2a1602;
  --color-card: #3d2003;
  --color-primary: #f97316;
  --color-primary-glow: rgba(249, 115, 22, 0.35);
  --color-cyan: #f97316;
}

/* 15. Copper */
[data-theme="copper"] {
  --color-bg: #140c04;
  --color-surface: #201408;
  --color-card: #2f1d0b;
  --color-primary: #f0c060;
  --color-primary-glow: rgba(240, 192, 96, 0.35);
  --color-cyan: #f0c060;
}

/* 16. Mocha */
[data-theme="mocha"] {
  --color-bg: #140e09;
  --color-surface: #231910;
  --color-card: #342518;
  --color-primary: #d4a373;
  --color-primary-glow: rgba(212, 163, 115, 0.35);
  --color-cyan: #d4a373;
}