/* ============================================================
   Sriansh OS — tokens.css
   All design tokens. Nothing hardcoded elsewhere.
   ============================================================ */
:root {
  /* --- Color: dark (default) --- */
  --bg-0: #0a0b0f;
  --bg-1: #0e1016;
  --bg-2: #151823;
  --bg-3: #1c2030;
  --line: #262b3d;
  --line-strong: #353c54;

  --txt-0: #eef1f8;
  --txt-1: #aeb6cc;
  --txt-2: #6e7793;

  --accent: #6d8bff;
  --accent-2: #57e6c3;
  --accent-3: #ff7a9c;
  --warn: #ffcf6b;

  --glow: color-mix(in srgb, var(--accent) 35%, transparent);
  --glow-2: color-mix(in srgb, var(--accent-2) 30%, transparent);

  /* --- Typography --- */
  --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "JetBrains Mono", "Fira Code", Menlo, Consolas, monospace;

  --fs-xs: 0.75rem;
  --fs-sm: 0.875rem;
  --fs-base: 1rem;
  --fs-md: 1.125rem;
  --fs-lg: clamp(1.4rem, 3vw, 2rem);
  --fs-xl: clamp(2rem, 5vw, 3.4rem);
  --fs-2xl: clamp(2.6rem, 7vw, 4.6rem);

  /* --- Spacing (4px base) --- */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-6: 24px;
  --s-8: 32px;
  --s-12: 48px;
  --s-16: 64px;
  --s-24: 96px;
  --s-32: 128px;

  /* --- Radius --- */
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 22px;
  --r-pill: 999px;
  --r-win: 16px;

  /* --- Shadow / elevation --- */
  --sh-1: 0 1px 2px rgba(0,0,0,.4);
  --sh-2: 0 8px 24px rgba(0,0,0,.45);
  --sh-3: 0 24px 60px rgba(0,0,0,.55);
  --ring: 0 0 0 1px var(--line), 0 0 0 4px var(--glow);

  /* --- Motion --- */
  --ease-out: cubic-bezier(.22,.61,.36,1);
  --ease-in-out: cubic-bezier(.65,.05,.36,1);
  --dur-1: 140ms;
  --dur-2: 260ms;
  --dur-3: 420ms;
  --dur-4: 700ms;

  /* --- Layout --- */
  --container: 1200px;
  --prose: 720px;
  --menubar-h: 60px;
  --section-y: clamp(64px, 10vw, 128px);
}

[data-theme="light"] {
  --bg-0: #f6f7fb;
  --bg-1: #ffffff;
  --bg-2: #ffffff;
  --bg-3: #eef1f8;
  --line: #e2e6f0;
  --line-strong: #cdd4e4;

  --txt-0: #11131a;
  --txt-1: #444b60;
  --txt-2: #7a8298;

  --glow: color-mix(in srgb, var(--accent) 22%, transparent);
  --glow-2: color-mix(in srgb, var(--accent-2) 20%, transparent);

  --sh-1: 0 1px 2px rgba(16,18,30,.08);
  --sh-2: 0 8px 24px rgba(16,18,30,.10);
  --sh-3: 0 24px 60px rgba(16,18,30,.14);
}