/* ═══════════════════════════════════════════════════════════════════════════
   VARIABLES.CSS — Technoclub UOH Design Tokens
   Scientific Cyan & Deep Space Design System
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* ── Typography Stack ── */
  --font-display: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono:    'JetBrains Mono', 'Fira Code', 'Courier New', monospace;
  --font-serif:   'EB Garamond', 'Playfair Display', Georgia, serif;

  /* ── Spacing Base Grid (8px scale) ── */
  --space-2xs: 0.125rem; /*  2px */
  --space-xs:  0.25rem;  /*  4px */
  --space-sm:  0.5rem;   /*  8px */
  --space-md:  1rem;     /* 16px */
  --space-lg:  1.5rem;   /* 24px */
  --space-xl:  2rem;     /* 32px */
  --space-2xl: 3rem;     /* 48px */
  --space-3xl: 5rem;     /* 80px */
  --space-4xl: 8rem;     /* 128px */

  /* ── Border Radius ── */
  --radius-xs:   4px;
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   18px;
  --radius-xl:   24px;
  --radius-full: 9999px;

  /* ── Layout Dimensions ── */
  --max-width:     1180px;
  --max-width-wide: 1360px;
  --nav-height:    64px;
  --ticker-height: 38px;

  /* ═══════════════════════════════════════════════════════════════════════════
     LIGHT THEME (Light Yellow, Pink & Violet Pastel Combination)
     ═══════════════════════════════════════════════════════════════════════════ */
  --bg-primary:       #fffcf6;
  --bg-mesh:          radial-gradient(at 0% 0%, rgba(254, 240, 138, 0.35) 0px, transparent 48%),
                      radial-gradient(at 100% 10%, rgba(251, 207, 232, 0.40) 0px, transparent 50%),
                      radial-gradient(at 50% 50%, rgba(233, 213, 255, 0.35) 0px, transparent 52%),
                      radial-gradient(at 15% 95%, rgba(254, 240, 138, 0.30) 0px, transparent 45%),
                      radial-gradient(at 85% 90%, rgba(244, 114, 182, 0.22) 0px, transparent 50%),
                      #fffdf8;
  --bg-secondary:     linear-gradient(135deg, rgba(254, 249, 195, 0.40) 0%, rgba(252, 231, 243, 0.45) 50%, rgba(243, 232, 255, 0.45) 100%);
  --bg-surface:       rgba(255, 255, 255, 0.86);
  --bg-elevated:      rgba(255, 255, 255, 0.94);
  --bg-card-hover:    rgba(255, 255, 255, 0.98);

  /* ── Text ── */
  --text-primary:     #0f172a;
  --text-secondary:   #334155;
  --text-muted:       #64748b;
  --text-inverse:     #ffffff;

  /* ── Brand Accents ── */
  --accent-primary:       #0284c7;   /* Scientific Cyan */
  --accent-primary-lt:    #e0f2fe;   /* Badges & faint highlights */
  --accent-primary-dk:    #0369a1;   /* Hover states */
  --accent-secondary:     #4f46e5;   /* Indigo */
  --accent-secondary-lt:  #eef2ff;
  --accent-secondary-dk:  #4338ca;

  /* ── Semantic Colors ── */
  --color-success:    #059669;
  --color-success-lt: #dcfce7;
  --color-warning:    #d97706;
  --color-warning-lt: #fef3c7;
  --color-error:      #dc2626;
  --color-error-lt:   #fee2e2;
  --color-info:       #0284c7;
  --color-info-lt:    #e0f2fe;

  /* ── Borders & Separators ── */
  --border-default:   #e2e8f0;
  --border-strong:    #cbd5e1;
  --border-accent:    rgba(2, 132, 199, 0.25);

  /* ── Shadows ── */
  --shadow-sm:  0 1px 3px rgba(15, 23, 42, 0.05), 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-md:  0 4px 12px rgba(15, 23, 42, 0.06), 0 2px 4px rgba(15, 23, 42, 0.04);
  --shadow-lg:  0 12px 30px rgba(15, 23, 42, 0.08), 0 4px 12px rgba(15, 23, 42, 0.04);
  --shadow-glow: 0 0 24px rgba(2, 132, 199, 0.18);

  /* ── Nav & Chrome ── */
  --nav-bg:     rgba(255, 255, 255, 0.92);
  --nav-blur:   18px;
  --ticker-bg:  linear-gradient(90deg, #0284c7, #4f46e5);

  /* ── Gradients ── */
  --gradient-hero:     linear-gradient(135deg, #0284c7 0%, #4f46e5 50%, #7c3aed 100%);
  --gradient-card:     linear-gradient(145deg, rgba(2, 132, 199, 0.04), rgba(79, 70, 229, 0.04));
  --gradient-text:     linear-gradient(135deg, #0284c7, #4f46e5);
  --grid-line-color:   rgba(2, 132, 199, 0.07);
  --pattern-circuit:   rgba(2, 132, 199, 0.05);
}

/* ═══════════════════════════════════════════════════════════════════════════
   DARK THEME (Deep Space & Research Lab)
   ═══════════════════════════════════════════════════════════════════════════ */
[data-theme="dark"] {
  /* ── Surfaces ── */
  --bg-primary:       #030712;   /* Deep Void Black */
  --bg-secondary:     #0b1120;   /* Deep Space Navy */
  --bg-surface:       rgba(15, 23, 42, 0.75);
  --bg-elevated:      #1e293b;
  --bg-card-hover:    rgba(30, 41, 59, 0.65);
  --bg-mesh:          none;

  /* ── Text ── */
  --text-primary:     #f8fafc;
  --text-secondary:   #cbd5e1;
  --text-muted:       #94a3b8;
  --text-inverse:     #030712;

  /* ── Brand Accents ── */
  --accent-primary:       #38bdf8;   /* Electric Neon Cyan */
  --accent-primary-lt:    rgba(56, 189, 248, 0.14);
  --accent-primary-dk:    #7dd3fc;
  --accent-secondary:     #818cf8;   /* Electric Indigo */
  --accent-secondary-lt:  rgba(129, 140, 248, 0.14);
  --accent-secondary-dk:  #a5b4fc;

  /* ── Semantic Colors ── */
  --color-success:    #34d399;
  --color-success-lt: rgba(52, 211, 153, 0.15);
  --color-warning:    #fbbf24;
  --color-warning-lt: rgba(251, 191, 36, 0.15);
  --color-error:      #f87171;
  --color-error-lt:   rgba(248, 113, 113, 0.15);
  --color-info:       #38bdf8;
  --color-info-lt:    rgba(56, 189, 248, 0.14);

  /* ── Borders & Separators ── */
  --border-default:   rgba(148, 163, 184, 0.14);
  --border-strong:    rgba(148, 163, 184, 0.26);
  --border-accent:    rgba(56, 189, 248, 0.35);

  /* ── Shadows & Neon Glow ── */
  --shadow-sm:  0 2px 8px rgba(0, 0, 0, 0.45);
  --shadow-md:  0 6px 20px rgba(0, 0, 0, 0.55);
  --shadow-lg:  0 14px 40px rgba(0, 0, 0, 0.65);
  --shadow-glow: 0 0 32px rgba(56, 189, 248, 0.22);
  --neon-cyan:   0 0 14px rgba(56, 189, 248, 0.4), inset 0 0 10px rgba(56, 189, 248, 0.08);
  --neon-indigo: 0 0 14px rgba(129, 140, 248, 0.4), inset 0 0 10px rgba(129, 140, 248, 0.08);

  /* ── Nav & Chrome ── */
  --nav-bg:     rgba(3, 7, 18, 0.90);
  --nav-blur:   20px;
  --ticker-bg:  linear-gradient(90deg, #0284c7, #4f46e5);

  /* ── Glassmorphism ── */
  --glass-bg:      rgba(15, 23, 42, 0.72);
  --glass-border:  rgba(56, 189, 248, 0.18);
  --glass-blur:    18px;

  /* ── Gradients ── */
  --gradient-hero:     linear-gradient(135deg, #38bdf8 0%, #818cf8 50%, #c084fc 100%);
  --gradient-card:     linear-gradient(145deg, rgba(56, 189, 248, 0.05), rgba(129, 140, 248, 0.05));
  --gradient-text:     linear-gradient(135deg, #38bdf8, #818cf8);
  --grid-line-color:   rgba(56, 189, 248, 0.06);
  --pattern-circuit:   rgba(56, 189, 248, 0.08);
}