/* ============================================
   UnboundBytes — Brand CSS Variables
   Complete Color System (12 Schemes)
   ============================================ */

/* ---- PRIMARY: Cyber Terminal ---- */
:root,
[data-theme="cyber-terminal"] {
  --ub-background: #0A0A0F;
  --ub-surface: #1A1A26;
  --ub-border: #2A2A3A;
  --ub-text: #E0E0EC;
  --ub-bright: #F5F5FF;
  --ub-muted: #6B6B80;
  --ub-primary: #00E5CC;
  --ub-secondary: #8B5CF6;
  --ub-accent: #FF6B35;
  --ub-gradient: linear-gradient(135deg, #00E5CC 0%, #8B5CF6 100%);
  --ub-primary-glow: rgba(0, 229, 204, 0.15);
  --ub-secondary-glow: rgba(139, 92, 246, 0.15);
}

/* ---- Midnight Ember ---- */
[data-theme="midnight-ember"] {
  --ub-background: #0B0D1A;
  --ub-surface: #151828;
  --ub-border: #252840;
  --ub-text: #D8D8E8;
  --ub-bright: #F0F0FF;
  --ub-muted: #6A6A88;
  --ub-primary: #FF5733;
  --ub-secondary: #FF9F43;
  --ub-accent: #FFD93D;
  --ub-gradient: linear-gradient(135deg, #FF5733 0%, #FF9F43 100%);
  --ub-primary-glow: rgba(255, 87, 51, 0.15);
  --ub-secondary-glow: rgba(255, 159, 67, 0.15);
}

/* ---- Arctic Frost ---- */
[data-theme="arctic-frost"] {
  --ub-background: #F4F6FA;
  --ub-surface: #FFFFFF;
  --ub-border: #DDE1EA;
  --ub-text: #2C3044;
  --ub-bright: #0F1220;
  --ub-muted: #6C7290; /* darkened from #7A7F96 for WCAG AA 4.5:1 on white */
  --ub-primary: #3B82F6;
  --ub-secondary: #0EA5E9;
  --ub-accent: #6366F1;
  --ub-gradient: linear-gradient(135deg, #3B82F6 0%, #0EA5E9 100%);
  --ub-primary-glow: rgba(59, 130, 246, 0.12);
  --ub-secondary-glow: rgba(14, 165, 233, 0.12);
}

/* ---- Neon Forge ---- */
[data-theme="neon-forge"] {
  --ub-background: #0F0F14;
  --ub-surface: #1A1A22;
  --ub-border: #2E2E3A;
  --ub-text: #E0E0E8;
  --ub-bright: #FFFFFF;
  --ub-muted: #7A7A8C;
  --ub-primary: #FF2D78;
  --ub-secondary: #FFE033;
  --ub-accent: #00F0FF;
  --ub-gradient: linear-gradient(135deg, #FF2D78 0%, #FFE033 100%);
  --ub-primary-glow: rgba(255, 45, 120, 0.15);
  --ub-secondary-glow: rgba(255, 224, 51, 0.15);
}

/* ---- Forest Protocol ---- */
[data-theme="forest-protocol"] {
  --ub-background: #0A110E;
  --ub-surface: #141F1A;
  --ub-border: #243028;
  --ub-text: #C8D8CC;
  --ub-bright: #E8F5EC;
  --ub-muted: #6A8070;
  --ub-primary: #34D399;
  --ub-secondary: #10B981;
  --ub-accent: #F59E0B;
  --ub-gradient: linear-gradient(135deg, #34D399 0%, #10B981 100%);
  --ub-primary-glow: rgba(52, 211, 153, 0.15);
  --ub-secondary-glow: rgba(16, 185, 129, 0.15);
}

/* ---- Solar Flare ---- */
[data-theme="solar-flare"] {
  --ub-background: #110E08;
  --ub-surface: #1C1810;
  --ub-border: #302A1C;
  --ub-text: #E0D8C8;
  --ub-bright: #FFF8E8;
  --ub-muted: #8A7E68;
  --ub-primary: #F59E0B;
  --ub-secondary: #EF4444;
  --ub-accent: #FBBF24;
  --ub-gradient: linear-gradient(135deg, #F59E0B 0%, #EF4444 100%);
  --ub-primary-glow: rgba(245, 158, 11, 0.15);
  --ub-secondary-glow: rgba(239, 68, 68, 0.15);
}

/* ---- Phantom Orchid ---- */
[data-theme="phantom-orchid"] {
  --ub-background: #0C0A14;
  --ub-surface: #16132A;
  --ub-border: #28243E;
  --ub-text: #D8D0F0;
  --ub-bright: #F0ECFF;
  --ub-muted: #7A70A0;
  --ub-primary: #A855F7;
  --ub-secondary: #EC4899;
  --ub-accent: #06B6D4;
  --ub-gradient: linear-gradient(135deg, #A855F7 0%, #EC4899 100%);
  --ub-primary-glow: rgba(168, 85, 247, 0.15);
  --ub-secondary-glow: rgba(236, 72, 153, 0.15);
}

/* ---- Clean Slate ---- */
[data-theme="clean-slate"] {
  --ub-background: #FAFAFA;
  --ub-surface: #FFFFFF;
  --ub-border: #E5E5E5;
  --ub-text: #333333;
  --ub-bright: #111111;
  --ub-muted: #6D6D6D; /* darkened from #888888 for WCAG AA 4.5:1 on white */
  --ub-primary: #0D9488;
  --ub-secondary: #6B7280;
  --ub-accent: #F97316;
  --ub-gradient: linear-gradient(135deg, #0D9488 0%, #6B7280 100%);
  --ub-primary-glow: rgba(13, 148, 136, 0.12);
  --ub-secondary-glow: rgba(107, 114, 128, 0.12);
}

/* ---- Cobalt Oxide ---- */
[data-theme="cobalt-oxide"] {
  --ub-background: #080C18;
  --ub-surface: #0E1428;
  --ub-border: #1C2440;
  --ub-text: #C8D4F0;
  --ub-bright: #E8EEFF;
  --ub-muted: #5A6A98;
  --ub-primary: #3B82F6;
  --ub-secondary: #60A5FA;
  --ub-accent: #F472B6;
  --ub-gradient: linear-gradient(135deg, #3B82F6 0%, #60A5FA 100%);
  --ub-primary-glow: rgba(59, 130, 246, 0.15);
  --ub-secondary-glow: rgba(96, 165, 250, 0.15);
}

/* ---- Sand & Stone ---- */
[data-theme="sand-stone"] {
  --ub-background: #FAF7F2;
  --ub-surface: #FFFFFF;
  --ub-border: #E8E0D4;
  --ub-text: #3D3428;
  --ub-bright: #1A1408;
  --ub-muted: #7A6D5A; /* darkened from #8A7E6C for WCAG AA 4.5:1 on white */
  --ub-primary: #C2410C;
  --ub-secondary: #B45309;
  --ub-accent: #0E7490;
  --ub-gradient: linear-gradient(135deg, #C2410C 0%, #B45309 100%);
  --ub-primary-glow: rgba(194, 65, 12, 0.12);
  --ub-secondary-glow: rgba(180, 83, 9, 0.12);
}

/* ---- Ghost Wire ---- */
[data-theme="ghost-wire"] {
  --ub-background: #0C0C0E;
  --ub-surface: #151517;
  --ub-border: #222226;
  --ub-text: #A0A0A8;
  --ub-bright: #E0E0E4;
  --ub-muted: #55555C;
  --ub-primary: #7DD3FC;
  --ub-secondary: #94A3B8;
  --ub-accent: #FCA5A5;
  --ub-gradient: linear-gradient(135deg, #7DD3FC 0%, #94A3B8 100%);
  --ub-primary-glow: rgba(125, 211, 252, 0.12);
  --ub-secondary-glow: rgba(148, 163, 184, 0.12);
}

/* ---- Infrared ---- */
[data-theme="infrared"] {
  --ub-background: #0E0808;
  --ub-surface: #1A1010;
  --ub-border: #301818;
  --ub-text: #E0C8C8;
  --ub-bright: #FFE8E8;
  --ub-muted: #8A6060;
  --ub-primary: #EF4444;
  --ub-secondary: #F97316;
  --ub-accent: #22D3EE;
  --ub-gradient: linear-gradient(135deg, #EF4444 0%, #F97316 100%);
  --ub-primary-glow: rgba(239, 68, 68, 0.15);
  --ub-secondary-glow: rgba(249, 115, 22, 0.15);
}


/* ============================================
   Typography
   ============================================ */

/* Import in your HTML:
   <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;400;500;600;700&family=Sora:wght@300;400;500;600;700&display=swap" rel="stylesheet">
*/

:root {
  --ub-font-display: 'Sora', sans-serif;
  --ub-font-body: 'Sora', sans-serif;
  --ub-font-mono: 'JetBrains Mono', monospace;

  /* Glassmorphic Design Tokens */
  --ub-glass-blur-sm: 4px;
  --ub-glass-blur: 12px;
  --ub-glass-blur-lg: 20px;
  --ub-glass-opacity-subtle: 60%;
  --ub-glass-opacity: 70%;
  --ub-glass-opacity-strong: 80%;
  --ub-glass-saturate: 160%;
}


/* ============================================
   Glassmorphic Design System
   ============================================

   Frosted-glass utility classes for consistent
   backdrop-blur and transparency effects.

   WCAG AA: All glass surfaces use semi-opaque
   backgrounds that maintain readable contrast.
   ============================================ */

/* --- Glass Surfaces --- */

.glass-subtle {
  background: color-mix(in srgb, var(--ub-surface) var(--ub-glass-opacity-subtle), transparent);
  backdrop-filter: blur(var(--ub-glass-blur-sm)) saturate(150%);
  -webkit-backdrop-filter: blur(var(--ub-glass-blur-sm)) saturate(150%);
  border: 1px solid color-mix(in srgb, var(--ub-border) 50%, transparent);
}

.glass {
  background: color-mix(in srgb, var(--ub-surface) var(--ub-glass-opacity), transparent);
  backdrop-filter: blur(var(--ub-glass-blur)) saturate(var(--ub-glass-saturate));
  -webkit-backdrop-filter: blur(var(--ub-glass-blur)) saturate(var(--ub-glass-saturate));
  border: 1px solid color-mix(in srgb, var(--ub-border) 60%, transparent);
}

.glass-strong {
  background: color-mix(in srgb, var(--ub-surface) var(--ub-glass-opacity-strong), transparent);
  backdrop-filter: blur(var(--ub-glass-blur-lg)) saturate(180%);
  -webkit-backdrop-filter: blur(var(--ub-glass-blur-lg)) saturate(180%);
  border: 1px solid color-mix(in srgb, var(--ub-border) 70%, transparent);
}

/* --- Accent-tinted Glass --- */

.glass-accent {
  background: color-mix(in srgb, var(--ub-primary) 8%, color-mix(in srgb, var(--ub-surface) var(--ub-glass-opacity), transparent) 92%);
  backdrop-filter: blur(var(--ub-glass-blur)) saturate(var(--ub-glass-saturate));
  -webkit-backdrop-filter: blur(var(--ub-glass-blur)) saturate(var(--ub-glass-saturate));
  border: 1px solid color-mix(in srgb, var(--ub-primary) 15%, var(--ub-border) 85%);
}

/* --- Glass Overlay (modals, backdrops) --- */

.glass-overlay {
  background: color-mix(in srgb, var(--ub-background) 50%, transparent);
  backdrop-filter: blur(var(--ub-glass-blur-sm));
  -webkit-backdrop-filter: blur(var(--ub-glass-blur-sm));
}

/* --- Standalone Blur Utilities --- */

.backdrop-blur-sm {
  backdrop-filter: blur(var(--ub-glass-blur-sm));
  -webkit-backdrop-filter: blur(var(--ub-glass-blur-sm));
}

.backdrop-blur {
  backdrop-filter: blur(var(--ub-glass-blur));
  -webkit-backdrop-filter: blur(var(--ub-glass-blur));
}

.backdrop-blur-lg {
  backdrop-filter: blur(var(--ub-glass-blur-lg));
  -webkit-backdrop-filter: blur(var(--ub-glass-blur-lg));
}

/* --- Interactive Glass --- */

.glass-interactive {
  background: color-mix(in srgb, var(--ub-surface) var(--ub-glass-opacity), transparent);
  backdrop-filter: blur(var(--ub-glass-blur)) saturate(var(--ub-glass-saturate));
  -webkit-backdrop-filter: blur(var(--ub-glass-blur)) saturate(var(--ub-glass-saturate));
  border: 1px solid color-mix(in srgb, var(--ub-border) 60%, transparent);
  transition: background 0.2s, border-color 0.2s, box-shadow 0.2s;
}

.glass-interactive:hover {
  background: color-mix(in srgb, var(--ub-surface) var(--ub-glass-opacity-strong), transparent);
  border-color: color-mix(in srgb, var(--ub-primary) 30%, var(--ub-border) 70%);
  box-shadow: 0 4px 16px var(--ub-primary-glow);
}

/* --- Reduced Motion --- */

@media (prefers-reduced-motion: reduce) {
  .glass-interactive {
    transition: none;
  }
}