@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=Orbitron:wght@400;500;600;700;800;900&display=swap");

:root {
  /* Fonts */
  --foc-font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --foc-font-display: "Orbitron", "Inter", system-ui, sans-serif;
  --foc-font-mono: ui-monospace, "Cascadia Code", "Courier New", monospace;

  /* Font sizes */
  --foc-text-xs: 0.75rem;
  --foc-text-sm: 0.875rem;
  --foc-text-base: 1rem;
  --foc-text-md: 1.125rem;
  --foc-text-lg: 1.25rem;
  --foc-text-xl: 1.5rem;
  --foc-text-2xl: 1.875rem;
  --foc-text-3xl: 2.25rem;
  --foc-text-4xl: 3rem;

  /* Font weights */
  --foc-weight-normal: 400;
  --foc-weight-medium: 500;
  --foc-weight-semibold: 600;
  --foc-weight-bold: 700;
  --foc-weight-extrabold: 800;
  --foc-weight-black: 900;

  /* Line heights */
  --foc-leading-tight: 1.12;
  --foc-leading-snug: 1.35;
  --foc-leading-normal: 1.5;
  --foc-leading-relaxed: 1.75;

  /* Brand — homepage default (sky magenta) */
  --foc-cyan: #1ba7ff;
  --foc-magenta: #ff2daa;
  --foc-pink: #fc2b5a;
  --foc-purple: #7c3aed;
  --foc-navy: #061426;
  --foc-navy-deep: #0d2146;
  --foc-navy-mid: #0a2240;
  --foc-teal: #0e7c6b;
  --foc-teal-light: #38bdf8;
  --foc-lavender: #e9d5ff;
  --foc-sky-muted: rgba(255, 255, 255, 0.55);

  /* Semantic colors */
  --foc-color-primary: var(--foc-cyan);
  --foc-color-accent: var(--foc-magenta);
  --foc-color-cta: var(--foc-pink);

  --foc-color-bg: #f5fbff;
  --foc-color-bg-alt: #eaf4ff;
  --foc-color-bg-muted: #f8fafc;
  --foc-color-bg-section: #f1f5f9;
  --foc-color-bg-cream: #f8faff;
  --foc-color-surface: #ffffff;
  --foc-color-surface-2: #f1f7ff;

  --foc-color-text: #061426;
  --foc-color-text-strong: #111827;
  --foc-color-text-muted: #3e5876;
  --foc-color-text-muted-2: #5b7390;
  --foc-color-text-subtle: #64748b;
  --foc-color-text-body: #334155;
  --foc-color-text-soft: #475569;
  --foc-color-text-caption: #5a6680;
  --foc-color-text-inverse: #ffffff;
  --foc-gray-500: #6b7280;
  --foc-gray-400: #9ca3af;

  --foc-color-border: rgba(4, 25, 45, 0.12);
  --foc-color-border-strong: rgba(4, 25, 45, 0.18);
  --foc-color-border-light: #e2e8f0;
  --foc-color-border-ui: #e5e7eb;
  --foc-color-border-tab: #e8edf5;
  --foc-color-border-card: #dce4f5;

  /* Section accent palette (pillars / tabs) */
  --foc-green: #16a34a;
  --foc-green-dark: #1a7a4a;
  --foc-blue: #1565c0;
  --foc-purple-dark: #6a1f9a;
  --foc-orange: #e65100;
  --foc-teal-tab: #00838f;
  --foc-navy-badge: #163565;
  --foc-navy-heading: #163972;

  /* Tint backgrounds (cards / chips) */
  --foc-purple-50: #f5f3ff;
  --foc-purple-100: #ede9fe;
  --foc-purple-200: #ddd6fe;
  --foc-purple-700: #6d28d9;
  --foc-purple-800: #5b21b6;
  --foc-purple-900: #4c1d95;
  --foc-green-50: #dcfce7;
  --foc-green-100: #bbf7d0;
  --foc-blue-50: #dbeafe;
  --foc-blue-100: #bfdbfe;
  --foc-amber-50: #fef3c7;
  --foc-amber-400: #fbbf24;
  --foc-pink-500: #ec4899;
  --foc-sky-500: #0ea5e9;
  --foc-emerald-500: #10b981;
  --foc-indigo-500: #6366f1;
  --foc-indigo-600: #4f46e5;
  --foc-violet-400: #a78bfa;
  --foc-violet-300: #c4b5fd;
  --foc-cyan-400: #22d3ee;
  --foc-chip-bg: #f3f4f6;
  --foc-partner-green-bg: #e8f8ef;
  --foc-partner-blue-bg: #e3f0ff;
  --foc-partner-purple-bg: #f3e8ff;
  --foc-partner-orange-bg: #fff3e0;
  --foc-partner-green-end: #c8efda;
  --foc-partner-blue-end: #c8e0ff;
  --foc-partner-purple-end: #e5ccff;
  --foc-partner-orange-end: #ffe0b2;
  --foc-blue-bright: #1e88e5;
  --foc-purple-bright: #9c27b0;
  --foc-orange-bright: #ff7043;
  --foc-border-card: #dce4f5;
  --foc-border-soft: #e4ebf8;
  --foc-text-caption-alt: #5a6680;
  --foc-blue-600: #2563eb;
  --foc-blue-700: #1d4ed8;
  --foc-green-700: #15803d;
  --foc-green-800: #166534;
  --foc-orange-600: #ea580c;
  --foc-orange-700: #c2410c;
  --foc-orange-800: #92400e;
  --foc-orange-900: #78350f;
  --foc-amber-200: #fde68a;
  --foc-amber-300: #fdba74;
  --foc-orange-100: #fed7aa;
  --foc-orange-50: #fff7ed;
  --foc-green-50-alt: #f0fdf4;
  --foc-blue-50-alt: #eff6ff;
  --foc-slate-900: #0f172a;
  --foc-slate-800: #1e293b;
  --foc-indigo-950: #1e1b4b;
  --foc-indigo-900: #312e81;
  --foc-indigo-400: #818cf8;
  --foc-fuchsia-400: #c084fc;
  --foc-blue-400: #60a5fa;
  --foc-brand-deep: #534ab7;
  --foc-brand-blue: #1a6abf;
  --foc-gray-600: #4a5568;
  --foc-gray-muted: #8896aa;
  --foc-border-ui-alt: #edf1f8;
  --foc-border-ui-alt2: #e8edf5;
  --foc-teal-muted: #7ecfc0;
  --foc-teal-bright: #4dd9c7;
  --foc-green-hover: #25a060;
  --foc-success-bright: #4ade80;
  --foc-sky-caption: #8aadcc;
  --foc-sky-caption-2: #7aaac8;
  --foc-slate-muted: #b0c4de;
  --foc-hero-navy: #0c2340;
  --foc-hero-navy-mid: #0f3460;
  --foc-hero-navy-deep: #0a1628;
  --foc-zenith-bg: #0f0a1e;
  --foc-zenith-bg-mid: #0c1a3a;
  --foc-slate-400: #94a3b8;
  --foc-slate-500: #475569;
  --foc-border-row: #f0f3f8;
  --foc-border-row-alt: #f4f6fa;
  --foc-cta-gradient-start: #f0f8f4;
  --foc-cta-gradient-end: #e8f4ff;
  --foc-cta-border: #d8edf8;
  --foc-cta-text-muted: #b8cce0;
  --foc-teal-bg-hover: #e8f4f0;
  --foc-cyber-accent: #00e5ff;
  --foc-gold: #ffd542;
  --foc-green-deep: #14532d;
  --foc-sky-tint: #e6f1fb;
  --foc-sky-light: #7dd3fc;
  --foc-sky-bright: #4fc3f7;
  --foc-panel-bg: #f0f4f8;
  --foc-panel-bg-alt: #f0f7ff;
  --foc-navy-panel: #0d1b3e;
  --foc-green-light: #86efac;
  --foc-blue-tint: #b5d4f4;
  --foc-blue-tint-bg: #e3f2fd;
  --foc-magenta-deep: #db2777;
  --foc-indigo-deep: #3c3489;
  --foc-blue-deep: #185fa5;

  /* Status */
  --foc-color-success: #10b981;
  --foc-color-warning: #f59e0b;
  --foc-color-error: #ef4444;

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

  /* Layout */
  --foc-container-max: 1200px;
  --foc-container-max-wide: 1240px;
  --foc-container-max-xl: 1280px;
  --foc-container-pad: 32px;

  /* Radius */
  --foc-radius-sm: 8px;
  --foc-radius-md: 12px;
  --foc-radius-lg: 14px;
  --foc-radius-xl: 20px;
  --foc-radius-2xl: 24px;
  --foc-radius-full: 999px;

  /* Shadows */
  --foc-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06);
  --foc-shadow-md: 0 6px 24px rgba(15, 23, 42, 0.08);
  --foc-shadow-lg: 0 18px 48px rgba(15, 23, 42, 0.12);
  --foc-shadow-card: 0 8px 32px rgba(15, 23, 42, 0.1), 0 2px 8px rgba(15, 23, 42, 0.06);
  --foc-shadow-glow-cyan: 0 0 40px rgba(167, 139, 250, 0.4);
  --foc-shadow-glow-purple: 0 12px 32px rgba(124, 58, 237, 0.12);

  /* Motion */
  --foc-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --foc-duration-fast: 0.15s;
  --foc-duration: 0.25s;
  --foc-duration-slow: 0.4s;

  /* Homepage theme aliases (used by .foc-cyber-home) */
  --cyan: var(--foc-cyan);
  --red: var(--foc-magenta);
  --bg: var(--foc-color-bg);
  --bg2: var(--foc-color-bg-alt);
  --surface: var(--foc-color-surface);
  --surface2: var(--foc-color-surface-2);
  --border: var(--foc-color-border);
  --border-hi: var(--foc-color-border-strong);
  --text: var(--foc-color-text);
  --muted: var(--foc-color-text-muted);
  --muted2: var(--foc-color-text-muted-2);
  --scanline-a: rgba(6, 20, 38, 0);
  --scanline-b: rgba(6, 20, 38, 0.018);
  --grid-line: rgba(6, 20, 38, 0.055);
  --orb1: rgba(27, 167, 255, 0.14);
  --orb2: rgba(255, 45, 170, 0.12);
  --heroGlowC: rgba(27, 167, 255, 0.22);
  --heroGlowR: rgba(255, 45, 170, 0.18);
  --pillBg: rgba(27, 167, 255, 0.06);
  --pillHoverBorder: rgba(27, 167, 255, 0.30);
  --pillHoverShadow: rgba(27, 167, 255, 0.12);
  --primaryShadow: rgba(27, 167, 255, 0.18);
  --primaryShadowHover: rgba(255, 45, 170, 0.16);
  --statHoverBorder: rgba(27, 167, 255, 0.30);
  --statHoverShadow: rgba(27, 167, 255, 0.12);
  --dotShadow: rgba(27, 167, 255, 0.14);
  --terminalBg: var(--surface2);
  --cyan-soft: rgba(27, 167, 255, 0.085);
  --cyan-dim: rgba(27, 167, 255, 0.80);
  --cyan-glow: rgba(27, 167, 255, 0.22);
  --r: var(--foc-radius-lg);
  --ease: var(--foc-ease);
}

/* Global theme tokens: available to every page and component. */
/* Default (Sky Magenta) + explicit light theme */
:root:not([data-foc-theme]),
:root[data-foc-theme="light"],
:root[data-foc-theme="sky-magenta"] {
  --cyan:      var(--foc-cyan); /* sky */
  --red:       var(--foc-magenta); /* magenta */
  --bg:        var(--foc-color-bg);
  --bg2:       var(--foc-color-bg-alt);
  --surface:   var(--foc-color-surface);
  --surface2:  var(--foc-color-surface-2);
  --border:    rgba(4, 25, 45, .12);
  --border-hi: rgba(4, 25, 45, .18);
  --text:      var(--foc-color-text);
  --muted:     var(--foc-color-text-muted);
  --muted2:    var(--foc-color-text-muted-2);
  --scanline-a: rgba(6,20,38,.00);
  --scanline-b: rgba(6,20,38,.018);
  --grid-line: rgba(6,20,38,.055);
  --orb1: rgba(27,167,255,.14);
  --orb2: rgba(255,45,170,.12);
  --heroGlowC: rgba(27,167,255,.22);
  --heroGlowR: rgba(255,45,170,.18);
  --pillBg: rgba(27,167,255,.06);
  --pillHoverBorder: rgba(27,167,255,.30);
  --pillHoverShadow: rgba(27,167,255,.12);
  --primaryShadow: rgba(27,167,255,.18);
  --primaryShadowHover: rgba(255,45,170,.16);
  --statHoverBorder: rgba(27,167,255,.30);
  --statHoverShadow: rgba(27,167,255,.12);
  --dotShadow: rgba(27,167,255,.14);
  --terminalBg: var(--surface2);
  --cyan-soft: rgba(27,167,255,.085);
  --cyan-dim: rgba(27,167,255,.80);
  --cyan-glow: rgba(27,167,255,.22);
}

/* Theme A — Aurora (purple → pink) */
:root[data-foc-theme="aurora"] {
  --cyan:      var(--foc-purple);
  --red:       var(--foc-magenta);
  --bg:        var(--foc-color-bg);
  --bg2:       var(--foc-color-bg-alt);
  --surface:   var(--foc-color-surface);
  --surface2:  var(--foc-color-surface-2);
  --border:    rgba(16, 24, 40, .12);
  --border-hi: rgba(16, 24, 40, .18);
  --text:      var(--foc-color-text);
  --muted:     var(--foc-color-text-muted);
  --muted2:    var(--foc-color-text-muted-2);
  --scanline-a: rgba(11,18,32,.00);
  --scanline-b: rgba(11,18,32,.02);
  --grid-line: rgba(11,18,32,.06);
  --orb1: rgba(122,43,255,.16);
  --orb2: rgba(255,45,122,.14);
  --heroGlowC: rgba(122,43,255,.18);
  --heroGlowR: rgba(255,45,122,.16);
  --pillBg: rgba(122,43,255,.06);
  --pillHoverBorder: rgba(122,43,255,.28);
  --pillHoverShadow: rgba(122,43,255,.12);
  --primaryShadow: rgba(122,43,255,.18);
  --primaryShadowHover: rgba(255,45,122,.18);
  --statHoverBorder: rgba(122,43,255,.28);
  --statHoverShadow: rgba(122,43,255,.12);
  --dotShadow: rgba(122,43,255,.16);
  --terminalBg: var(--surface2);
  --cyan-soft: rgba(122,43,255,.08);
  --cyan-dim: rgba(122,43,255,.65);
  --cyan-glow: rgba(122,43,255,.28);
}

/* Theme B — Warm Pearl (friendly, less tech) */
:root[data-foc-theme="pearl"] {
  --cyan:      #C06A2B; /* warm amber */
  --red:       #E05A7B; /* soft rose */
  --bg:        #FFF7F1;
  --bg2:       #FFF1E6;
  --surface:   var(--foc-color-surface);
  --surface2:  #FFF6EF;
  --border:    rgba(31, 24, 16, .12);
  --border-hi: rgba(31, 24, 16, .18);
  --text:      #1D1A16;
  --muted:     #5C4E42;
  --muted2:    #7A6A5D;
  --scanline-a: rgba(29,26,22,.00);
  --scanline-b: rgba(29,26,22,.015);
  --grid-line: rgba(29,26,22,.05);
  --orb1: rgba(192,106,43,.16);
  --orb2: rgba(224,90,123,.14);
  --heroGlowC: rgba(192,106,43,.16);
  --heroGlowR: rgba(224,90,123,.14);
  --pillBg: rgba(192,106,43,.06);
  --pillHoverBorder: rgba(192,106,43,.30);
  --pillHoverShadow: rgba(192,106,43,.12);
  --primaryShadow: rgba(192,106,43,.18);
  --primaryShadowHover: rgba(224,90,123,.16);
  --statHoverBorder: rgba(192,106,43,.30);
  --statHoverShadow: rgba(192,106,43,.12);
  --dotShadow: rgba(192,106,43,.14);
  --terminalBg: var(--surface2);
  --cyan-soft: rgba(192,106,43,.08);
  --cyan-dim: rgba(192,106,43,.75);
  --cyan-glow: rgba(192,106,43,.22);
}

/* Theme D — Quantum Mint (clean cyber, mint + violet) */
:root[data-foc-theme="quantum-mint"] {
  --cyan:      #2AFDAD;
  --red:       #7C3BFF;
  --bg:        #F6FFFB;
  --bg2:       #E9FFF7;
  --surface:   var(--foc-color-surface);
  --surface2:  #F1FFFB;
  --border:    rgba(7, 22, 26, .12);
  --border-hi: rgba(7, 22, 26, .18);
  --text:      #07161A;
  --muted:     #355B61;
  --muted2:    #4C6F75;
  --scanline-a: rgba(7,22,26,.00);
  --scanline-b: rgba(7,22,26,.018);
  --grid-line: rgba(7,22,26,.055);
  --orb1: rgba(42,253,173,.12);
  --orb2: rgba(124,59,255,.12);
  --heroGlowC: rgba(42,253,173,.22);
  --heroGlowR: rgba(124,59,255,.18);
  --pillBg: rgba(42,253,173,.07);
  --pillHoverBorder: rgba(42,253,173,.32);
  --pillHoverShadow: rgba(42,253,173,.12);
  --primaryShadow: rgba(42,253,173,.18);
  --primaryShadowHover: rgba(124,59,255,.18);
  --statHoverBorder: rgba(42,253,173,.32);
  --statHoverShadow: rgba(42,253,173,.12);
  --dotShadow: rgba(42,253,173,.14);
  --terminalBg: var(--surface2);
  --cyan-soft: rgba(42,253,173,.09);
  --cyan-dim: rgba(42,253,173,.82);
  --cyan-glow: rgba(42,253,173,.22);
}

/* Theme E — Neon Slate (premium dark, dev-tool vibe) */
:root[data-foc-theme="neon-slate"] {
  --cyan:      #00E5FF;
  --red:       #FF4D9D;
  --bg:        #070B16;
  --bg2:       #090F22;
  --surface:   #0C142C;
  --surface2:  #0F1A36;
  --border:    rgba(0,229,255,.16);
  --border-hi: rgba(0,229,255,.34);
  --text:      #EAF3FF;
  --muted:     #7EA2D1;
  --muted2:    #4E6E9E;
  --scanline-a: rgba(0,229,255,.00);
  --scanline-b: rgba(0,229,255,.013);
  --grid-line: rgba(0,229,255,.045);
  --orb1: rgba(0,229,255,.09);
  --orb2: rgba(255,77,157,.075);
  --heroGlowC: rgba(0,229,255,.55);
  --heroGlowR: rgba(255,77,157,.45);
  --pillBg: rgba(0,229,255,.08);
  --pillHoverBorder: rgba(0,229,255,.65);
  --pillHoverShadow: rgba(0,229,255,.18);
  --primaryShadow: rgba(0,229,255,.35);
  --primaryShadowHover: rgba(255,77,157,.28);
  --statHoverBorder: rgba(0,229,255,.65);
  --statHoverShadow: rgba(0,229,255,.18);
  --dotShadow: rgba(0,229,255,.18);
  --terminalBg: var(--bg);
  --cyan-soft: rgba(0,229,255,.10);
  --cyan-dim: rgba(0,229,255,.86);
  --cyan-glow: rgba(0,229,255,.30);
}

/* Theme F — Arctic Hologram (icy light, holo magenta glow) */
:root[data-foc-theme="arctic-holo"] {
  --cyan:      #2BBAFF;
  --red:       #FF2DE2;
  --bg:        #F4FAFF;
  --bg2:       var(--foc-color-bg-alt);
  --surface:   var(--foc-color-surface);
  --surface2:  #F1F8FF;
  --border:    rgba(6, 20, 38, .12);
  --border-hi: rgba(6, 20, 38, .18);
  --text:      var(--foc-color-text);
  --muted:     #3D5A7B;
  --muted2:    #597699;
  --scanline-a: rgba(6,20,38,.00);
  --scanline-b: rgba(6,20,38,.018);
  --grid-line: rgba(6,20,38,.055);
  --orb1: rgba(43,186,255,.13);
  --orb2: rgba(255,45,226,.11);
  --heroGlowC: rgba(43,186,255,.26);
  --heroGlowR: rgba(255,45,226,.20);
  --pillBg: rgba(43,186,255,.06);
  --pillHoverBorder: rgba(43,186,255,.32);
  --pillHoverShadow: rgba(43,186,255,.12);
  --primaryShadow: rgba(43,186,255,.18);
  --primaryShadowHover: rgba(255,45,226,.16);
  --statHoverBorder: rgba(43,186,255,.32);
  --statHoverShadow: rgba(43,186,255,.12);
  --dotShadow: rgba(43,186,255,.14);
  --terminalBg: var(--surface2);
  --cyan-soft: rgba(43,186,255,.09);
  --cyan-dim: rgba(43,186,255,.84);
  --cyan-glow: rgba(43,186,255,.22);
}

/* Theme G — Matrix Lime (classic hacker green) */
:root[data-foc-theme="matrix-lime"] {
  --cyan:      #7CFF00;
  --red:       #00E5FF;
  --bg:        #050A08;
  --bg2:       #070E0B;
  --surface:   #09120D;
  --surface2:  #0B1610;
  --border:    rgba(124,255,0,.18);
  --border-hi: rgba(124,255,0,.38);
  --text:      #D9FFE8;
  --muted:     #5DAA80;
  --muted2:    #2F6B4A;
  --scanline-a: rgba(124,255,0,.00);
  --scanline-b: rgba(124,255,0,.014);
  --grid-line: rgba(124,255,0,.05);
  --orb1: rgba(124,255,0,.08);
  --orb2: rgba(0,229,255,.07);
  --heroGlowC: rgba(124,255,0,.42);
  --heroGlowR: rgba(0,229,255,.42);
  --pillBg: rgba(124,255,0,.08);
  --pillHoverBorder: rgba(124,255,0,.70);
  --pillHoverShadow: rgba(124,255,0,.18);
  --primaryShadow: rgba(124,255,0,.34);
  --primaryShadowHover: rgba(0,229,255,.26);
  --statHoverBorder: rgba(124,255,0,.70);
  --statHoverShadow: rgba(124,255,0,.18);
  --dotShadow: rgba(124,255,0,.18);
  --terminalBg: var(--bg);
  --cyan-soft: rgba(124,255,0,.10);
  --cyan-dim: rgba(124,255,0,.86);
  --cyan-glow: rgba(124,255,0,.30);
}

/* Theme H — Solarpunk Circuit (teal + solar orange) */
:root[data-foc-theme="solarpunk"] {
  --cyan:      #00C2A8;
  --red:       #FF8A00;
  --bg:        #F7FFFD;
  --bg2:       #ECFFFB;
  --surface:   var(--foc-color-surface);
  --surface2:  #F1FFFC;
  --border:    rgba(6, 27, 26, .12);
  --border-hi: rgba(6, 27, 26, .18);
  --text:      #061B1A;
  --muted:     #2F5B57;
  --muted2:    #4F7773;
  --scanline-a: rgba(6,27,26,.00);
  --scanline-b: rgba(6,27,26,.018);
  --grid-line: rgba(6,27,26,.055);
  --orb1: rgba(0,194,168,.12);
  --orb2: rgba(255,138,0,.12);
  --heroGlowC: rgba(0,194,168,.20);
  --heroGlowR: rgba(255,138,0,.18);
  --pillBg: rgba(0,194,168,.06);
  --pillHoverBorder: rgba(0,194,168,.30);
  --pillHoverShadow: rgba(0,194,168,.12);
  --primaryShadow: rgba(0,194,168,.18);
  --primaryShadowHover: rgba(255,138,0,.16);
  --statHoverBorder: rgba(0,194,168,.30);
  --statHoverShadow: rgba(0,194,168,.12);
  --dotShadow: rgba(0,194,168,.14);
  --terminalBg: var(--surface2);
  --cyan-soft: rgba(0,194,168,.085);
  --cyan-dim: rgba(0,194,168,.84);
  --cyan-glow: rgba(0,194,168,.22);
}

/* Theme J — Lavender Cream (soft lilac + teal) */
:root[data-foc-theme="lavender-cream"] {
  --cyan:      #7B61FF;
  --red:       #00B8A9;
  --bg:        #FAF8FF;
  --bg2:       #F3EEFF;
  --surface:   var(--foc-color-surface);
  --surface2:  #F6F2FF;
  --border:    rgba(24, 18, 48, .11);
  --border-hi: rgba(24, 18, 48, .17);
  --text:      #141022;
  --muted:     #4E4A6B;
  --muted2:    #6B6788;
  --scanline-a: rgba(20,16,34,.00);
  --scanline-b: rgba(20,16,34,.016);
  --grid-line: rgba(20,16,34,.05);
  --orb1: rgba(123,97,255,.13);
  --orb2: rgba(0,184,169,.11);
  --heroGlowC: rgba(123,97,255,.20);
  --heroGlowR: rgba(0,184,169,.18);
  --pillBg: rgba(123,97,255,.06);
  --pillHoverBorder: rgba(123,97,255,.30);
  --pillHoverShadow: rgba(123,97,255,.12);
  --primaryShadow: rgba(123,97,255,.18);
  --primaryShadowHover: rgba(0,184,169,.16);
  --statHoverBorder: rgba(123,97,255,.30);
  --statHoverShadow: rgba(123,97,255,.12);
  --dotShadow: rgba(123,97,255,.14);
  --terminalBg: var(--surface2);
  --cyan-soft: rgba(123,97,255,.085);
  --cyan-dim: rgba(123,97,255,.82);
  --cyan-glow: rgba(123,97,255,.22);
}

/* Theme K — Sunshine Paper (warm honey + ink blue) */
:root[data-foc-theme="sunshine-paper"] {
  --cyan:      #E8A317;
  --red:       #1E3A5F;
  --bg:        #FFFCF3;
  --bg2:       #FFF6E0;
  --surface:   var(--foc-color-surface);
  --surface2:  #FFF9EC;
  --border:    rgba(28, 22, 12, .11);
  --border-hi: rgba(28, 22, 12, .17);
  --text:      #1A1810;
  --muted:     #5A5345;
  --muted2:    #756C5C;
  --scanline-a: rgba(26,24,16,.00);
  --scanline-b: rgba(26,24,16,.014);
  --grid-line: rgba(26,24,16,.048);
  --orb1: rgba(232,163,23,.14);
  --orb2: rgba(30,58,95,.10);
  --heroGlowC: rgba(232,163,23,.20);
  --heroGlowR: rgba(30,58,95,.14);
  --pillBg: rgba(232,163,23,.07);
  --pillHoverBorder: rgba(232,163,23,.32);
  --pillHoverShadow: rgba(232,163,23,.12);
  --primaryShadow: rgba(232,163,23,.18);
  --primaryShadowHover: rgba(30,58,95,.14);
  --statHoverBorder: rgba(232,163,23,.32);
  --statHoverShadow: rgba(232,163,23,.12);
  --dotShadow: rgba(232,163,23,.14);
  --terminalBg: var(--surface2);
  --cyan-soft: rgba(232,163,23,.09);
  --cyan-dim: rgba(232,163,23,.82);
  --cyan-glow: rgba(232,163,23,.22);
}

/* Theme L — Rose Quartz (dusty rose + slate blue) */
:root[data-foc-theme="rose-quartz"] {
  --cyan:      #D65A7A;
  --red:       #3D6AAD;
  --bg:        #FFF8FA;
  --bg2:       #FFEDF3;
  --surface:   var(--foc-color-surface);
  --surface2:  #FFF5F8;
  --border:    rgba(40, 18, 28, .10);
  --border-hi: rgba(40, 18, 28, .16);
  --text:      #1C1418;
  --muted:     #5C4550;
  --muted2:    #78636C;
  --scanline-a: rgba(28,20,24,.00);
  --scanline-b: rgba(28,20,24,.015);
  --grid-line: rgba(28,20,24,.048);
  --orb1: rgba(214,90,122,.12);
  --orb2: rgba(61,106,173,.10);
  --heroGlowC: rgba(214,90,122,.18);
  --heroGlowR: rgba(61,106,173,.16);
  --pillBg: rgba(214,90,122,.06);
  --pillHoverBorder: rgba(214,90,122,.28);
  --pillHoverShadow: rgba(214,90,122,.10);
  --primaryShadow: rgba(214,90,122,.16);
  --primaryShadowHover: rgba(61,106,173,.14);
  --statHoverBorder: rgba(214,90,122,.28);
  --statHoverShadow: rgba(214,90,122,.10);
  --dotShadow: rgba(214,90,122,.12);
  --terminalBg: var(--surface2);
  --cyan-soft: rgba(214,90,122,.075);
  --cyan-dim: rgba(214,90,122,.78);
  --cyan-glow: rgba(214,90,122,.20);
}

/* Theme M — Nordic Sage (sage + ice blue) */
:root[data-foc-theme="nordic-sage"] {
  --cyan:      #5B9279;
  --red:       #5B8DEF;
  --bg:        #F7FAF8;
  --bg2:       #ECF4EF;
  --surface:   var(--foc-color-surface);
  --surface2:  #F1F7F3;
  --border:    rgba(12, 28, 22, .10);
  --border-hi: rgba(12, 28, 22, .16);
  --text:      #0F1C17;
  --muted:     #3D5A50;
  --muted2:    #567568;
  --scanline-a: rgba(15,28,23,.00);
  --scanline-b: rgba(15,28,23,.014);
  --grid-line: rgba(15,28,23,.045);
  --orb1: rgba(91,146,121,.12);
  --orb2: rgba(91,141,239,.10);
  --heroGlowC: rgba(91,146,121,.18);
  --heroGlowR: rgba(91,141,239,.16);
  --pillBg: rgba(91,146,121,.06);
  --pillHoverBorder: rgba(91,146,121,.28);
  --pillHoverShadow: rgba(91,146,121,.10);
  --primaryShadow: rgba(91,146,121,.16);
  --primaryShadowHover: rgba(91,141,239,.14);
  --statHoverBorder: rgba(91,146,121,.28);
  --statHoverShadow: rgba(91,146,121,.10);
  --dotShadow: rgba(91,146,121,.12);
  --terminalBg: var(--surface2);
  --cyan-soft: rgba(91,146,121,.075);
  --cyan-dim: rgba(91,146,121,.80);
  --cyan-glow: rgba(91,146,121,.20);
}

/* Theme I — Obsidian Burst (exact values provided) */
:root[data-foc-theme="obsidian-burst"] {
  --bg: #000000;
  --bg2: #000000;
  --surface: #0D0D0D;
  --surface2: #0D0D0D;

  /* Primary / Secondary */
  --cyan: #C93060;
  --red: #7B3F9E;

  --text: var(--foc-color-surface);
  --muted: #5A5A6A;
  --muted2: #5A5A6A;

  --border: rgba(201,48,96,.2);
  --border-hi: rgba(201,48,96,.32);

  --scanline-a: rgba(201,48,96,.00);
  --scanline-b: rgba(201,48,96,.012);
  --grid-line: rgba(201,48,96,.05);

  --orb1: rgba(201,48,96,.10);
  --orb2: rgba(123,63,158,.10);
  --heroGlowC: rgba(201,48,96,.55);
  --heroGlowR: rgba(123,63,158,.50);

  --pillBg: rgba(201,48,96,.08);
  --pillHoverBorder: rgba(201,48,96,.55);
  --pillHoverShadow: rgba(201,48,96,.18);
  --primaryShadow: rgba(201,48,96,.35);
  --primaryShadowHover: rgba(123,63,158,.26);
  --statHoverBorder: rgba(201,48,96,.55);
  --statHoverShadow: rgba(201,48,96,.18);
  --dotShadow: rgba(201,48,96,.18);
  --terminalBg: var(--bg);

  --cyan-soft: rgba(201,48,96,.10);
  --cyan-dim: rgba(201,48,96,.86);
  --cyan-glow: rgba(201,48,96,.30);
}

/* Dark cyber theme (previous one) */
:root[data-foc-theme="dark"] {
  --cyan:      #00E5FF;
  --red:       var(--foc-color-cta);
  --bg:        #060E1E;
  --bg2:       #08122A;
  --surface:   #0D1B38;
  --surface2:  #112040;
  --border:    rgba(0,229,255,.14);
  --border-hi: rgba(0,229,255,.32);
  --text:      #E0F0FF;
  --muted:     #4A6FA5;
  --muted2:    #2D4E7A;
  --scanline-a: rgba(0,229,255,.00);
  --scanline-b: rgba(0,229,255,.013);
  --grid-line: rgba(0,229,255,.04);
  --orb1: rgba(0,229,255,.08);
  --orb2: rgba(252,43,90,.07);
  --heroGlowC: rgba(0,229,255,.50);
  --heroGlowR: rgba(252,43,90,.50);
  --pillBg: rgba(0,229,255,.07);
  --pillHoverBorder: #00E5FF;
  --pillHoverShadow: rgba(0,229,255,.18);
  --primaryShadow: rgba(0,229,255,.35);
  --primaryShadowHover: rgba(0,229,255,.6);
  --statHoverBorder: #00E5FF;
  --statHoverShadow: rgba(0,229,255,.18);
  --dotShadow: rgba(0,229,255,.18);
  --terminalBg: var(--bg);
  --cyan-soft: rgba(0,229,255,.08);
  --cyan-dim: rgba(0,229,255,.80);
  --cyan-glow: rgba(0,229,255,.28);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--foc-font-sans);
  font-size: var(--foc-text-base);
  font-weight: var(--foc-weight-normal);
  line-height: var(--foc-leading-normal);
  color: var(--foc-color-text);
  background-color: var(--foc-color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--foc-font-display);
  color: var(--foc-color-text);
  line-height: var(--foc-leading-tight);
}

a {
  color: var(--foc-color-primary);
  text-decoration: none;
}

a:hover {
  color: var(--foc-color-accent);
}

.container {
  max-width: var(--foc-container-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--foc-container-pad);
  padding-right: var(--foc-container-pad);
  width: 100%;
}