/* =========================================================
   Link Bypasser — Design Tokens
   Theme: dark (default) + light
   ========================================================= */

:root {
  --font-display: "Space Grotesk", "Inter", system-ui, -apple-system, sans-serif;
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --container: 1220px;
  --gutter: clamp(1.25rem, 4vw, 2.5rem);
  --section-y: clamp(4rem, 8vw, 7.5rem);

  --r-xs: 6px;
  --r-sm: 9px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-pill: 999px;

  --t-fast: 0.16s;
  --t-base: 0.26s;
  --t-slow: 0.5s;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  --step--1: clamp(0.76rem, 0.74rem + 0.1vw, 0.83rem);
  --step-0: clamp(0.94rem, 0.91rem + 0.16vw, 1.03rem);
  --step-1: clamp(1.1rem, 1.03rem + 0.35vw, 1.3rem);
  --step-2: clamp(1.35rem, 1.2rem + 0.75vw, 1.85rem);
  --step-3: clamp(1.75rem, 1.42rem + 1.6vw, 2.8rem);
  --step-4: clamp(2.35rem, 1.55rem + 3.7vw, 4.4rem);
  --step-5: clamp(2.9rem, 1.45rem + 6.8vw, 6.6rem);
}

/* ---------- DARK (default) ---------- */
html[data-theme="dark"] {
  --bg: #08090c;
  --bg-2: #0b0d12;
  --surface: #101319;
  --surface-2: #161a21;
  --surface-3: #1c2029;

  --line: #21252e;
  --line-2: #2d323d;
  --line-3: #3a404d;

  --text: #ecedf3;
  --text-2: #a3a9b7;
  --text-3: #6d7483;

  --accent: #c9f24d;
  --accent-2: #7fe8c8;
  --on-accent: #0a0c06;
  --accent-text: #c9f24d;
  --accent-soft: rgba(201, 242, 77, 0.1);
  --accent-line: rgba(201, 242, 77, 0.26);
  --accent-glow: rgba(201, 242, 77, 0.18);
  --grad-a: #c9f24d;
  --grad-b: #7fe8c8;

  --danger: #ff7a7a;
  --danger-soft: rgba(255, 122, 122, 0.1);
  --ok: #6ee7a8;

  --grid-line: rgba(255, 255, 255, 0.026);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
  --shadow-md: 0 18px 40px -26px rgba(0, 0, 0, 0.9);
  --shadow-lg: 0 40px 90px -50px rgba(0, 0, 0, 1);
  --nav-bg: rgba(8, 9, 12, 0.72);

  color-scheme: dark;
}

/* ---------- LIGHT ---------- */
html[data-theme="light"] {
  --bg: #fafaf7;
  --bg-2: #f3f3ee;
  --surface: #ffffff;
  --surface-2: #f7f7f2;
  --surface-3: #eeeeea;

  --line: #e4e4da;
  --line-2: #d3d3c6;
  --line-3: #bcbcac;

  --text: #0b0c10;
  --text-2: #555b68;
  --text-3: #858b98;

  --accent: #c9f24d;
  --accent-2: #1f9e78;
  --on-accent: #111603;
  --accent-text: #4c6e00;
  --accent-soft: rgba(155, 200, 20, 0.12);
  --accent-line: rgba(122, 162, 12, 0.34);
  --accent-glow: rgba(155, 200, 20, 0.24);
  --grad-a: #5d7c00;
  --grad-b: #0f7d5f;

  --danger: #d4372f;
  --danger-soft: rgba(212, 55, 47, 0.08);
  --ok: #17915c;

  --grid-line: rgba(20, 24, 10, 0.035);
  --shadow-sm: 0 1px 2px rgba(20, 24, 12, 0.06);
  --shadow-md: 0 18px 40px -30px rgba(24, 30, 12, 0.45);
  --shadow-lg: 0 40px 90px -55px rgba(24, 30, 12, 0.5);
  --nav-bg: rgba(250, 250, 247, 0.78);

  color-scheme: light;
}