/* Design tokens — dark-first (default), light theme via [data-theme="light"]. */

:root {
  /* type scale — self-hosted IBM Plex, see public/styles/fonts.css and
     docs/public-site-redesign-spec.md §3. Real fallback stacks kept in case
     fonts.css isn't loaded on some page yet. */
  --font-ui: "IBM Plex Sans", ui-sans-serif, "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", "Cascadia Mono", Consolas, monospace;

  --text-display: 2.4rem;
  --text-h1: 1.6rem;
  --text-h2: 1.15rem;
  --text-body: 0.95rem;
  --text-small: 0.82rem;
  --text-label: 0.72rem;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;

  --radius: 10px;
  --radius-sm: 6px;
  --radius-lg: 16px;

  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.3), 0 8px 24px -8px rgba(0, 0, 0, 0.4);
  --transition: 160ms cubic-bezier(0.2, 0, 0, 1);
}

/* ---- Dark (default) ---- */
:root {
  --bg: #0a0c10;
  --bg-elevated: #0d0f14;
  --surface: #12151b;
  --surface-2: #191d25;
  --surface-3: #21262f;
  --border: #262b35;
  --border-strong: #333a47;

  --text: #f0f2f5;
  --text-soft: #a3aab8;
  --text-faint: #6b7280;

  --accent: #4f8bff;
  --accent-soft: #4f8bff1f;
  --accent-2: #8b7cf6;
  --accent-2-soft: #8b7cf61f;

  --good: #3ddc84;
  --good-soft: #3ddc8420;
  --warn: #f5a623;
  --warn-soft: #f5a62320;
  --bad: #ef5757;
  --bad-soft: #ef575720;

  --gradient-hero: radial-gradient(120% 140% at 15% 0%, #4f8bff22 0%, transparent 55%),
    radial-gradient(100% 120% at 100% 0%, #8b7cf622 0%, transparent 50%);
}

/* ---- Light ---- */
:root[data-theme="light"] {
  --bg: #f4f5f7;
  --bg-elevated: #ffffff;
  --surface: #ffffff;
  --surface-2: #f1f2f5;
  --surface-3: #e7e9ee;
  --border: #dde1e7;
  --border-strong: #c9cedb;

  --text: #14171c;
  --text-soft: #565f70;
  --text-faint: #8891a0;

  --accent: #3b6ae0;
  --accent-soft: #3b6ae014;
  --accent-2: #7657d8;
  --accent-2-soft: #7657d814;

  --good: #1fa15c;
  --good-soft: #1fa15c16;
  --warn: #c67c0a;
  --warn-soft: #c67c0a16;
  --bad: #d13f3f;
  --bad-soft: #d13f3f16;

  --shadow-card: 0 1px 2px rgba(20, 23, 28, 0.06), 0 8px 24px -12px rgba(20, 23, 28, 0.14);
  --gradient-hero: radial-gradient(120% 140% at 15% 0%, #3b6ae012 0%, transparent 55%),
    radial-gradient(100% 120% at 100% 0%, #7657d812 0%, transparent 50%);
}