/* ============================================================
   SteVic Labs — Design Tokens (self-contained)
   Colors · Typography · Spacing · Radii · Elevation · Motion
   Toggle dark mode with [data-theme="dark"] on <html>.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600;700&display=swap');

:root {
  /* --- Brand blue (primary) --- */
  --blue-50:#eff5ff; --blue-100:#dbe8fe; --blue-200:#bfd7fe; --blue-300:#93bbfd;
  --blue-400:#609afa; --blue-500:#3b82f6; --blue-600:#2563eb; --blue-700:#1d4ed8;
  --blue-800:#1e40af; --blue-900:#1e3a8a;

  /* --- Cyan (accent) --- */
  --cyan-300:#67e8f9; --cyan-400:#22d3ee; --cyan-500:#06b6d4; --cyan-600:#0891b2; --cyan-700:#0e7490;

  /* --- Slate (cool neutrals) --- */
  --slate-50:#f8fafc; --slate-100:#f1f5f9; --slate-200:#e2e8f0; --slate-300:#cbd5e1;
  --slate-400:#94a3b8; --slate-500:#64748b; --slate-600:#475569; --slate-700:#334155;
  --slate-800:#1e293b; --slate-900:#0f172a; --slate-950:#020617;
  --white:#fff; --black:#000;

  --green-500:#22c55e; --green-600:#16a34a;
  --amber-500:#f59e0b; --amber-600:#d97706;

  --grad-from:var(--blue-600); --grad-to:var(--cyan-500);
  --brand-gradient:linear-gradient(120deg, var(--blue-600) 0%, var(--cyan-500) 100%);

  /* families */
  --font-display:'Space Grotesk','Manrope',system-ui,sans-serif;
  --font-sans:'Manrope',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,'SF Mono',Menlo,monospace;

  /* weights */
  --fw-regular:400; --fw-medium:500; --fw-semibold:600; --fw-bold:700; --fw-black:800;

  /* font sizes */
  --text-2xs:11px; --text-xs:12px; --text-sm:14px; --text-md:16px; --text-lg:18px;
  --text-xl:20px; --text-2xl:24px; --text-3xl:30px; --text-4xl:38px; --text-5xl:48px;
  --text-6xl:60px; --text-7xl:76px;

  --tracking-tight:-0.02em; --tracking-tighter:-0.04em; --tracking-caps:0.08em;

  /* spacing (4px base) */
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:20px;
  --space-6:24px; --space-8:32px; --space-10:40px; --space-12:48px; --space-16:64px;
  --space-20:80px; --space-24:96px;

  /* radii */
  --radius-xs:4px; --radius-sm:6px; --radius-md:10px; --radius-lg:14px;
  --radius-xl:20px; --radius-2xl:28px; --radius-full:999px;

  /* elevation */
  --shadow-xs:0 1px 2px rgba(15,23,42,.06);
  --shadow-sm:0 1px 3px rgba(15,23,42,.08),0 1px 2px rgba(15,23,42,.04);
  --shadow-md:0 4px 12px rgba(15,23,42,.08),0 2px 4px rgba(15,23,42,.05);
  --shadow-lg:0 12px 28px rgba(15,23,42,.12),0 4px 10px rgba(15,23,42,.06);
  --shadow-xl:0 24px 56px rgba(15,23,42,.18),0 8px 16px rgba(15,23,42,.08);
  --shadow-glow:0 6px 24px color-mix(in srgb, var(--blue-500) 28%, transparent);

  /* motion */
  --ease-out:cubic-bezier(0.22,1,0.36,1);
  --ease-spring:cubic-bezier(0.34,1.56,0.64,1);
  --dur-fast:120ms; --dur-base:200ms; --dur-slow:360ms;

  /* semantic — light (default) */
  --primary:var(--blue-600); --primary-hover:var(--blue-700); --primary-soft:var(--blue-50);
  --on-primary:var(--white); --accent:var(--cyan-500); --accent-hover:var(--cyan-600);
  --bg:var(--slate-50); --surface:var(--white); --surface-2:var(--slate-50);
  --surface-hover:var(--slate-100);
  --text-strong:var(--slate-900); --text-body:var(--slate-700); --text-muted:var(--slate-500);
  --text-faint:var(--slate-400); --text-link:var(--blue-600);
  --border:var(--slate-200); --border-strong:var(--slate-300);
  --ring:color-mix(in srgb, var(--blue-500) 35%, transparent);
  color-scheme:light;
}

[data-theme="dark"] {
  --primary:var(--blue-500); --primary-hover:var(--blue-400); --primary-soft:color-mix(in srgb, var(--blue-500) 16%, var(--slate-900));
  --on-primary:var(--slate-950); --accent:var(--cyan-400); --accent-hover:var(--cyan-300);
  --bg:var(--slate-950); --surface:var(--slate-900); --surface-2:#0b1322;
  --surface-hover:var(--slate-800);
  --text-strong:var(--slate-50); --text-body:var(--slate-300); --text-muted:var(--slate-400);
  --text-faint:var(--slate-500); --text-link:var(--blue-400);
  --border:#1d293d; --border-strong:var(--slate-700);
  --ring:color-mix(in srgb, var(--blue-400) 40%, transparent);
  --shadow-xs:0 1px 2px rgba(0,0,0,.4);
  --shadow-sm:0 1px 3px rgba(0,0,0,.5),0 1px 2px rgba(0,0,0,.4);
  --shadow-md:0 4px 12px rgba(0,0,0,.5),0 2px 4px rgba(0,0,0,.4);
  --shadow-lg:0 12px 28px rgba(0,0,0,.6),0 4px 10px rgba(0,0,0,.4);
  --shadow-xl:0 24px 56px rgba(0,0,0,.7),0 8px 16px rgba(0,0,0,.5);
  --shadow-glow:0 6px 28px color-mix(in srgb, var(--blue-500) 40%, transparent);
  color-scheme:dark;
}

/* base reset */
*,*::before,*::after { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body {
  margin:0; font-family:var(--font-sans); font-size:var(--text-md);
  line-height:1.5; font-weight:var(--fw-regular); color:var(--text-body); background:var(--bg);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  transition:background var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out);
}
h1,h2,h3,h4,h5 { font-family:var(--font-display); color:var(--text-strong); font-weight:var(--fw-bold); letter-spacing:var(--tracking-tight); line-height:1.1; margin:0; text-wrap:balance; }
p { margin:0; text-wrap:pretty; }
a { color:var(--text-link); text-decoration:none; }
::selection { background:color-mix(in srgb, var(--primary) 26%, transparent); }
:focus-visible { outline:none; box-shadow:0 0 0 3px var(--ring); border-radius:var(--radius-sm); }
img { max-width:100%; display:block; }
button { font-family:inherit; }