/* ═══════════════════════════════════════════════════
   LGF · tokens.css
   Design system — amber/gold cyberpunk military
═══════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@400;500;600;700&family=Fira+Code:wght@300;400;500;600&family=Exo+2:ital,wght@0,300;0,400;0,600;0,800;1,300&display=swap');

:root {
  /* ── Core palette ── */
  --void:      #070809;
  --abyss:     #0b0d10;
  --deep:      #0e1014;
  --surface:   #13161b;
  --raise:     #191d24;
  --lift:      #1f242d;
  --float:     #252b36;

  /* ── Borders ── */
  --b0: rgba(255,255,255,.04);
  --b1: rgba(255,255,255,.07);
  --b2: rgba(255,255,255,.11);
  --b3: rgba(255,255,255,.18);

  /* ── Text ── */
  --t1: #f4f0e8;
  --t2: #a89f8c;
  --t3: #5c5649;
  --t4: #2e2b25;

  /* ── Amber accent (primary) ── */
  --amber:      #f5a623;
  --amber-dim:  rgba(245,166,35,.1);
  --amber-glow: rgba(245,166,35,.06);
  --amber-line: rgba(245,166,35,.22);

  /* ── Secondary accents ── */
  --rust:   #e8512a;
  --sage:   #4ecdc4;
  --violet: #8b7dff;
  --bone:   #d4c9a8;

  /* ── Typography ── */
  --f-display: 'Rajdhani', sans-serif;
  --f-body:    'Exo 2', sans-serif;
  --f-mono:    'Fira Code', monospace;

  /* ── Spacing scale (fluid) ── */
  --s1: clamp(4px,  0.5vw, 6px);
  --s2: clamp(8px,  1vw,   12px);
  --s3: clamp(12px, 1.5vw, 18px);
  --s4: clamp(16px, 2vw,   24px);
  --s5: clamp(24px, 3vw,   36px);
  --s6: clamp(36px, 4.5vw, 56px);
  --s7: clamp(56px, 7vw,   88px);

  /* ── Radius ── */
  --r1: 3px;
  --r2: 6px;
  --r3: 10px;
  --r4: 16px;
  --rpill: 999px;

  /* ── Transitions ── */
  --fast:   .12s cubic-bezier(.4,0,.2,1);
  --base:   .22s cubic-bezier(.4,0,.2,1);
  --slow:   .4s  cubic-bezier(.4,0,.2,1);
  --spring: .35s cubic-bezier(.34,1.5,.64,1);

  /* ── Layout ── */
  --nav-h:     56px;
  --sidebar-w: 220px;
  --content-max: 1100px;
}

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

/* ── Selection ── */
::selection { background: rgba(245,166,35,.25); color: var(--t1); }

/* ── Scrollbar ── */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: var(--abyss); }
::-webkit-scrollbar-thumb { background: var(--float); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: rgba(245,166,35,.3); }

/* ── Custom cursor dot ── */
@media (pointer:fine) {
  body { cursor: none; }
  #cursor {
    position: fixed;
    top: 0; left: 0;
    width: 6px; height: 6px;
    background: var(--amber);
    border-radius: 50%;
    pointer-events: none;
    z-index: 9999;
    transform: translate(-50%,-50%);
    transition: transform .08s, background .15s, width .15s, height .15s;
    mix-blend-mode: difference;
  }
  #cursor.hover {
    width: 28px; height: 28px;
    background: rgba(245,166,35,.15);
    border: 1px solid var(--amber);
  }
}