/* ============================================================
   Pathway to Success — design tokens
   Mirrors shared/tokens.css from the Claude design project so the
   marketing site, admin console and app all speak the same language.
   ============================================================ */

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

:root {
  /* radius */
  --r-xs: 7px;
  --r-sm: 9px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 22px;
  --r-pill: 999px;

  /* type */
  --font-sans: 'Plus Jakarta Sans', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* brand primary — trustworthy blue */
  --primary-50:  #EEF4FF;
  --primary-100: #DCE7FE;
  --primary-200: #BFD2FE;
  --primary-300: #93B4FD;
  --primary-400: #608EF9;
  --primary-500: #3B70F2;
  --primary-600: #2563EB;
  --primary-700: #1D4FD7;
  --primary-800: #1E45AE;
  --primary-900: #1E3C8A;

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

/* ---- LIGHT (default) ---- */
:root,
.surface-light {
  --canvas: #F5F7FA;
  --surface: #FFFFFF;
  --raised: #FFFFFF;
  --sunken: #EEF1F6;
  --ink: #0F1825;
  --ink-2: #515C6B;
  --ink-3: #8A93A1;
  --line: #E5E9F0;
  --line-strong: #D2D9E3;
  --primary: var(--primary-600);
  --primary-ink: #FFFFFF;
  --primary-soft: var(--primary-50);
  --primary-soft-ink: var(--primary-700);
  --focus: #2563EB;
  --shadow-sm: 0 1px 2px rgba(15,24,37,.06), 0 1px 3px rgba(15,24,37,.05);
  --shadow-md: 0 4px 10px -2px rgba(15,24,37,.08), 0 2px 6px -2px rgba(15,24,37,.06);
  --shadow-lg: 0 18px 40px -12px rgba(15,24,37,.22), 0 6px 14px -8px rgba(15,24,37,.12);
  --overlay: rgba(15,24,37,.45);

  /* status families: bg / fg / dot */
  --slate-bg:#EDF0F5;  --slate-fg:#475467;  --slate-dot:#64748B;
  --amber-bg:#FDF0DC;  --amber-fg:#A85C06;  --amber-dot:#F59E0B;
  --blue-bg:#E3EDFE;   --blue-fg:#1D4FD7;   --blue-dot:#2563EB;
  --violet-bg:#ECE7FE; --violet-fg:#6D28D9; --violet-dot:#7C3AED;
  --teal-bg:#D6F3EE;   --teal-fg:#0F766E;   --teal-dot:#0D9488;
  --green-bg:#DBF6E5;  --green-fg:#15803D;  --green-dot:#16A34A;
  --red-bg:#FCE3E3;    --red-fg:#BE2424;    --red-dot:#DC2626;
}

/* ---- DARK ---- */
.surface-dark {
  --canvas: #0A0D13;
  --surface: #12171F;
  --raised: #19202A;
  --sunken: #0E131A;
  --ink: #F1F4F9;
  --ink-2: #9DA8B6;
  --ink-3: #66707E;
  --line: #232C38;
  --line-strong: #313C49;
  --primary: #4B82F4;
  --primary-ink: #FFFFFF;
  --primary-soft: #15233F;
  --primary-soft-ink: #9DBEFB;
  --focus: #6699FF;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.5);
  --shadow-md: 0 6px 16px -4px rgba(0,0,0,.6);
  --shadow-lg: 0 22px 48px -16px rgba(0,0,0,.7);
  --overlay: rgba(0,0,0,.6);

  --slate-bg:#222B36;  --slate-fg:#AAB4C1;  --slate-dot:#7C8896;
  --amber-bg:#38280F;  --amber-fg:#FBC36A;  --amber-dot:#F59E0B;
  --blue-bg:#152648;   --blue-fg:#9CBCFB;   --blue-dot:#4B82F4;
  --violet-bg:#241C42; --violet-fg:#C7B6FF; --violet-dot:#9F7BFF;
  --teal-bg:#0E2F2C;   --teal-fg:#62D8C9;   --teal-dot:#19B6A4;
  --green-bg:#0F2E1E;  --green-fg:#6FE6A0;  --green-dot:#22C55E;
  --red-bg:#371718;    --red-fg:#FF9C9C;    --red-dot:#F05252;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.mono { font-family: var(--font-mono); font-feature-settings: "tnum" 1; }

button:focus-visible, a:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}