/*
 * SemiMatrix — Shared CSS Custom Properties
 * Include this file in pages that use the dark tech theme (jobs, scholarships, etc.)
 * Usage: <link rel="stylesheet" href="../styles/vars.css">
 */

:root {
  /* ── Backgrounds — Luxury Midnight/Onyx ─────────── */
  --bg:         #020617;
  --bg2:        #09090b;
  --bg3:        #1e293b;
  --card:       #0f172a;
  --card2:      #1e293b;
  --surface-1:  rgba(15,23,42,0.92);
  --surface-2:  rgba(30,41,59,0.96);
  --glass-bg:   rgba(2,6,23,0.88);

  /* ── Borders — Subtle & Refined ───────────────────── */
  --border:     rgba(255,255,255,0.06);
  --border2:    rgba(255,255,255,0.12);
  --border-b:   rgba(255,255,255,0.15);

  /* ── Primary accent: Matrix Cyan ──────────────── */
  --accent:      #06b6d4;
  --accent-dim:  rgba(6,182,212,0.10);
  --accent-glow: rgba(6,182,212,0.35);
  --accent2:     #10b981;
  --accent2-dim: rgba(16,185,129,0.10);
  --accent3:     #7fff7a;
  --accent4:     #a78bfa;

  /* ── Semantic colors (unified) ────────────────────────── */
  --blue:       #38bdf8;
  --blue-dim:   rgba(56,189,248,0.10);
  --blue-glow:  rgba(56,189,248,0.25);

  --green:      #10b981;
  --green-dim:  rgba(16,185,129,0.10);
  --green-glow: rgba(16,185,129,0.25);

  --cyan:       #06b6d4;
  --cyan-dim:   rgba(6,182,212,0.10);
  --cyan-glow:  rgba(6,182,212,0.30);

  --purple:     #a78bfa;
  --purple-dim: rgba(167,139,250,0.10);

  --red:        #f43f5e;
  --red-dim:    rgba(244,63,94,0.10);

  /* ── Text — High contrast slate ────────────────────── */
  --text:     #f1f5f9;
  --text-mid: #94a3b8;
  --text-dim: #64748b;
  --sub:      #64748b;
  --muted:    #475569;

  /* ── Typography ──────────────────────────────────────── */
  --font-mono:    'JetBrains Mono', 'Share Tech Mono', monospace;
  --font-display: 'Outfit', 'Kanit', sans-serif;
  --font-body:    'Kanit', sans-serif;
  --mono:    'JetBrains Mono', 'Share Tech Mono', monospace;
  --display: 'Outfit', 'Kanit', sans-serif;
  --body:    'Kanit', sans-serif;

  /* ── Layout ──────────────────────────────────────────── */
  --radius:     16px;
  --radius-sm:  12px;
  --radius-lg:  24px;
  --sidebar-w:  280px;
  --topbar-h:   72px;
  --nav-h:      72px;
  --transition: all 0.4s cubic-bezier(0.19, 1, 0.22, 1);
  --tr:         all 0.4s cubic-bezier(0.19, 1, 0.22, 1);

  /* ── Shadows — Premium & Deep ─────────────────── */
  --shadow-card:  0 12px 40px rgba(0,0,0,0.5);
  --shadow-float: 0 24px 60px rgba(0,0,0,0.6);
  --shadow-glow:  0 0 30px rgba(6,182,212,0.10);
  --focus-ring:   0 0 0 4px rgba(6,182,212,0.20);

  /* ── Grid overlay (subtler) ──────────────────────────── */
  --grid-color: rgba(255,255,255,0.02);
}

html.light {
  --bg:         #f8fafc;
  --bg2:        #f1f5f9;
  --bg3:        #e2e8f0;
  --card:       #ffffff;
  --card2:      #f8fafc;
  --surface-1:  rgba(255,255,255,0.92);
  --surface-2:  rgba(248,250,252,0.96);
  --glass-bg:   rgba(255,255,255,0.88);
  
  --border:     rgba(0,0,0,0.06);
  --border2:    rgba(0,0,0,0.10);
  --border-b:   rgba(0,0,0,0.08);
  
  --accent:     #0369a1;
  --accent-dim: rgba(3,105,161,0.06);
  --accent-glow: rgba(3,105,161,0.15);
  
  --text:       #0f172a;
  --text-mid:   #475569;
  --sub:        #64748b;
  --muted:      #94a3b8;
  
  --shadow-card: 0 8px 30px rgba(0,0,0,0.04);
  --shadow-float: 0 16px 40px rgba(0,0,0,0.06);
  --shadow-glow: 0 0 20px rgba(3,105,161,0.05);
  --grid-color: rgba(0,0,0,0.02);
}

/* ── Shared resets ───────────────────────────────────────── */
*   { margin: 0; padding: 0; box-sizing: border-box; }
html {
  scroll-behavior: smooth;
  overflow-x: clip;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  min-height: 100vh;
  overflow-x: clip;
}

/* ── Shared grid overlay ─────────────────────────────────── */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    linear-gradient(var(--grid-color) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-color) 1px, transparent 1px);
  background-size: 48px 48px;
}