/* ═══════════════════════════════════════════════════════════════
   TransAshanti v6.0 — Design System & CSS Variables
   Typography · Colors · Spacing · Shadows · Animations
   ═══════════════════════════════════════════════════════════════ */

/* ── Google Fonts ──────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500&display=swap');

/* ── Design Tokens ─────────────────────────────────────────── */
:root {
  /* Colors — Dark Mode (default) */
  --bg0: #0b0904;
  --bg1: #13100a;
  --bg2: #1b170e;
  --bg3: #172848;

  /* Brand */
  --tl:  #F2B705;
  --tl2: #C99400;
  --tl3: rgba(226,164,0,.10);
  --tl4: rgba(226,164,0,.06);

  /* Semantic */
  --am:  #f59e0b;   /* amber  — warning */
  --am3: rgba(245, 158, 11, .12);
  --re:  #ef4444;   /* red    — danger  */
  --re3: rgba(239,  68,  68, .12);
  --gr:  #22c55e;   /* green  — success */
  --gr3: rgba( 34, 197,  94, .12);
  --bl:  #3b82f6;   /* blue   — info    */
  --bl3: rgba( 59, 130, 246, .12);
  --pu:  #a855f7;   /* purple — special */
  --pu3: rgba(168,  85, 247, .12);

  /* Text */
  --t1: #edf4ff;
  --t2: #8aa4c8;
  --t3: #7d93b5;   /* 4.7:1+ on every dark surface (was #4a6080, 2.5:1) */
  --t4: #253245;

  /* Surfaces */
  --bd:  rgba(255, 255, 255, .07);
  --bd2: rgba(255, 255, 255, .13);
  --gl:  rgba( 12,  26,  46, .65);
  --gl2: rgba(255, 255, 255, .04);

  /* Typography */
  --fn: 'Outfit', system-ui, sans-serif;
  --fm: 'JetBrains Mono', 'Courier New', monospace;

  /* Border Radius */
  --rS: 8px;
  --rM: 14px;
  --rL: 20px;
  --rX: 28px;
  --r2: 40px;

  /* Shadows */
  --sS: 0 2px 8px  rgba(0, 0, 0, .30);
  --sM: 0 8px 32px rgba(0, 0, 0, .45);
  --sL: 0 24px 80px rgba(0, 0, 0, .65);
  --stl: 0 0 36px rgba(226,164,0,.22);
  --sam: 0 0 36px rgba(245, 158, 11, .22);

  /* Layout */
  --nav: 64px;
  --sidebar: 220px;
  --max-w: 1280px;

  /* Transitions */
  --tr: all .2s ease;
  --tr-slow: all .35s cubic-bezier(.23, 1, .32, 1);
}

/* ── Light Mode Override ────────────────────────────────────── */
body.light-mode {
  --bg0: #f0f4ff;
  --bg1: #ffffff;
  --bg2: #f5f8ff;
  --bg3: #eaeffc;
  --t1:  #0c1526;
  --t2:  #4a5a78;
  --t3:  #56688a;   /* 4.8:1+ on light surfaces (was #8a9bbf, 2.8:1) */
  --bd:  rgba(0, 0, 0, .09);
  --bd2: rgba(0, 0, 0, .15);
  --gl:  rgba(255, 255, 255, .80);
  --gl2: rgba(0,   0,   0, .04);
}

/* ── Reset ─────────────────────────────────────────────────── */
*, *::before, *::after {
  margin: 0; padding: 0;
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
}
body {
  font-family: var(--fn);
  background: var(--bg0);
  color: var(--t1);
  overflow-x: hidden;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
a  { text-decoration: none; color: inherit; }
img { max-width: 100%; height: auto; display: block; }
button { font-family: var(--fn); }
input, select, textarea { font-family: var(--fn); }

/* ── Accessibility ──────────────────────────────────────────── */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); border: 0;
}
:focus-visible {
  outline: 2px solid var(--tl);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ── Scrollbar ─────────────────────────────────────────────── */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: var(--bg1); }
::-webkit-scrollbar-thumb { background: var(--t4); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--tl); }

/* ── Custom Cursor (desktop only) ───────────────────────────── */
@media (pointer: fine) {
  body { cursor: none; }
  #cursor-dot  { display: block !important; }
  #cursor-ring { display: block !important; }
}
#cursor-dot, #cursor-ring {
  position: fixed; border-radius: 50%;
  pointer-events: none; z-index: 9999;
  will-change: transform; display: none;
}
#cursor-dot {
  width: 9px; height: 9px;
  background: var(--tl);
  mix-blend-mode: screen;
}
#cursor-ring {
  width: 32px; height: 32px;
  border: 1.5px solid rgba(226,164,0,.32);
  transition: width .2s, height .2s;
}
#cursor-ring.hovered {
  width: 52px; height: 52px;
}

/* ── Layout Utilities ──────────────────────────────────────── */
.container  { max-width: var(--max-w); margin: 0 auto; padding: 0 40px; }
.section    { padding: 100px 0; }
.flex       { display: flex; }
.flex-col   { flex-direction: column; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.justify-center  { justify-content: center; }
.gap-4 { gap: 16px; } .gap-6 { gap: 24px; } .gap-8 { gap: 32px; }
.mt-4 { margin-top: 16px; } .mt-6 { margin-top: 24px; } .mt-8 { margin-top: 32px; }
.mb-4 { margin-bottom: 16px; } .mb-6 { margin-bottom: 24px; }
.text-center { text-align: center; }
.text-teal   { color: var(--tl); }
.text-muted  { color: var(--t2); }
.text-sm     { font-size: .875rem; }
.font-bold   { font-weight: 700; }
.font-black  { font-weight: 900; }
.truncate    { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hidden      { display: none !important; }
.w-full      { width: 100%; }

@media (max-width: 768px) {
  .container { padding: 0 20px; }
  .section   { padding: 60px 0; }
}

/* ── Divider ────────────────────────────────────────────────── */
.divider { height: 1px; background: var(--bd); margin: 20px 0; }