/* crawlie design tokens — a faithful take on Vercel's Geist system.
   Minimal, high-contrast, restrained color, generous whitespace.
   Color signals state and hierarchy, never decoration. */

:root {
  /* Typography */
  --font-sans: "Geist Variable", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "Geist Mono Variable", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Type scale (token-driven, not hand-set) */
  --heading-32: 600 32px/1.1 var(--font-sans);
  --heading-24: 600 24px/1.2 var(--font-sans);
  --heading-20: 600 20px/1.3 var(--font-sans);
  --heading-16: 600 16px/1.4 var(--font-sans);
  --label-16: 500 16px/1.4 var(--font-sans);
  --label-14: 500 14px/1.45 var(--font-sans);
  --label-13: 500 13px/1.45 var(--font-sans);
  --label-12: 500 12px/1.4 var(--font-sans);
  --copy-16: 400 16px/1.6 var(--font-sans);
  --copy-14: 400 14px/1.6 var(--font-sans);
  --copy-13: 400 13px/1.55 var(--font-sans);

  /* Spacing — 4px base rhythm */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 40px;
  --sp-8: 64px;

  /* Radius — one family per view */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-full: 9999px;

  /* Motion */
  --ease: cubic-bezier(0.175, 0.885, 0.32, 1.1);
  --t-fast: 150ms;
  --t-med: 200ms;
}

/* ---- Light theme ---- */
:root,
:root[data-theme="light"] {
  --bg: #ffffff;
  --bg-subtle: #fafafa;
  --bg-2: #f5f5f5;
  --surface: #ffffff;
  --gray-100: #f2f2f2;
  --gray-200: #ebebeb;
  --border: #ebebeb;
  --border-strong: #d9d9d9;

  --text: #171717;
  --text-secondary: #666666;
  --text-tertiary: #8f8f8f;

  --blue: #006bff;
  --blue-hover: #005fe0;
  --blue-bg: #f0f6ff;
  --blue-border: #cfe2ff;

  --red: #e5484d;
  --red-text: #ca3a3f;
  --red-bg: #fff5f5;
  --red-border: #f5d2d3;

  --amber: #f5a623;
  --amber-text: #a05e00;
  --amber-bg: #fff8ec;
  --amber-border: #f7e3bd;

  --green: #1a9d63;
  --green-text: #157a4d;
  --green-bg: #ecf8f1;
  --green-border: #c8e9d6;

  --shadow-card: 0 2px 2px rgba(0, 0, 0, 0.04);
  --shadow-pop: 0 1px 1px rgba(0, 0, 0, 0.02), 0 4px 8px -4px rgba(0, 0, 0, 0.04),
    0 16px 24px -8px rgba(0, 0, 0, 0.06);
  --focus-gap: #ffffff;
}

/* ---- Dark theme ---- */
:root[data-theme="dark"] {
  --bg: #0a0a0a;
  --bg-subtle: #0e0e0e;
  --bg-2: #161616;
  --surface: #0e0e0e;
  --gray-100: #1a1a1a;
  --gray-200: #1f1f1f;
  --border: #242424;
  --border-strong: #383838;

  --text: #ededed;
  --text-secondary: #a1a1a1;
  --text-tertiary: #707070;

  --blue: #3b9eff;
  --blue-hover: #5aaeff;
  --blue-bg: #0d1b2e;
  --blue-border: #1c3a5e;

  --red: #ff6166;
  --red-text: #ff8589;
  --red-bg: #2a1416;
  --red-border: #5a2326;

  --amber: #f5b544;
  --amber-text: #f7c870;
  --amber-bg: #2a1f0d;
  --amber-border: #574013;

  --green: #3ddc91;
  --green-text: #6fe7b1;
  --green-bg: #0d2419;
  --green-border: #1c4733;

  --shadow-card: 0 2px 2px rgba(0, 0, 0, 0.2);
  --shadow-pop: 0 1px 1px rgba(0, 0, 0, 0.2), 0 4px 8px -4px rgba(0, 0, 0, 0.3),
    0 16px 24px -8px rgba(0, 0, 0, 0.4);
  --focus-gap: #0a0a0a;
}

@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
    animation: none !important;
  }
}
