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

:root {
  /* ── Backgrounds ─────────────────────────────────────── */
  --bg:  #0a0905;
  --bg2: #0f0e08;
  --card:  #17140a;
  --card2: #1c1910;
  --surface-1: rgba(23,20,10,0.92);
  --surface-2: rgba(28,25,16,0.96);
  --glass-bg: rgba(10,9,5,0.85);

  /* ── Borders ─────────────────────────────────────────── */
  --border:  rgba(80,60,20,0.5);
  --border2: rgba(120,90,30,0.45);

  /* ── Primary accent: Amber/Orange ────────────────────── */
  --accent:      #f59e0b;
  --accent-dim:  rgba(245,158,11,0.12);
  --accent-glow: rgba(245,158,11,0.28);
  --accent2:     #fb923c;
  --accent2-dim: rgba(251,146,60,0.12);

  /* ── Semantic colors (kept for compatibility) ─────────── */
  --blue:       #f59e0b;
  --blue-dim:   rgba(245,158,11,0.12);
  --blue-glow:  rgba(245,158,11,0.28);

  --green:      #34d399;
  --green-dim:  rgba(52,211,153,0.12);
  --green-glow: rgba(52,211,153,0.28);

  --amber:      #f59e0b;
  --amber-dim:  rgba(245,158,11,0.12);
  --amber-glow: rgba(245,158,11,0.28);

  --cyan:       #fb923c;
  --cyan-dim:   rgba(251,146,60,0.12);
  --cyan-glow:  rgba(251,146,60,0.28);

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

  --red:        #ef4444;
  --red-dim:    rgba(239,68,68,0.12);

  /* ── Text ────────────────────────────────────────────── */
  --text:     #e8d9b8;
  --text-mid: #a89060;
  --sub:      #6b5530;
  --muted:    #c4a96a;

  /* ── Typography ──────────────────────────────────────── */
  --font-mono:    'Share Tech Mono', monospace;
  --font-display: 'Rajdhani', sans-serif;
  --font-body:    'Sarabun', sans-serif;

  /* ── Layout ──────────────────────────────────────────── */
  --radius:     14px;
  --radius-sm:  10px;
  --radius-lg:  18px;
  --transition: all 0.22s cubic-bezier(0.4,0,0.2,1);

  /* ── Shadows ─────────────────────────────────────────── */
  --shadow-card:  0 18px 42px rgba(0,0,0,0.38);
  --shadow-float: 0 24px 60px rgba(0,0,0,0.52);
  --shadow-glow:  0 0 24px rgba(245,158,11,0.15);
  --focus-ring:   0 0 0 3px rgba(245,158,11,0.2);

  /* ── Grid overlay ────────────────────────────────────── */
  --grid-color: rgba(245,158,11,0.022);
}

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

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

/* ── 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;
}