/* Taylr design tokens. Source of truth: brand/tokens/taylr-tokens.json
   Fonts: Sora (display, 600-800) and Inter (UI/body, 400-600), both free on Google Fonts. */

:root {
  /* Brand palette */
  --taylr-cobalt-50: #EEF2FF;
  --taylr-cobalt-100: #DCE4FF;
  --taylr-cobalt-200: #B9C8FF;
  --taylr-cobalt-300: #8EA6FF;
  --taylr-cobalt-400: #5E80FF;
  --taylr-cobalt-500: #2F5BFF; /* Taylr Cobalt, the brand color */
  --taylr-cobalt-600: #1F45E0;
  --taylr-cobalt-700: #1835B0;
  --taylr-cobalt-800: #142A85;
  --taylr-cobalt-900: #101F5C;

  --taylr-ink: #0B1020;
  --taylr-ink-800: #161C2E;
  --taylr-ink-700: #1E2539;
  --taylr-ink-600: #2A3249;
  --taylr-slate-500: #5B6275;
  --taylr-slate-400: #8A90A0;
  --taylr-slate-300: #B9BDC8;
  --taylr-slate-200: #DDE0E7;
  --taylr-mist: #F4F6FA;
  --taylr-paper: #FFFFFF;

  --taylr-volt: #D4FF3A; /* celebration accent: streaks, PRs, completed patches. Use on Ink only. */

  --taylr-success: #15803D;
  --taylr-warning: #F5A524;
  --taylr-error: #D92D3A;

  /* Semantic roles, light theme */
  --bg: var(--taylr-mist);
  --surface: var(--taylr-paper);
  --surface-raised: var(--taylr-paper);
  --border: var(--taylr-slate-200);
  --text: var(--taylr-ink);
  --text-muted: var(--taylr-slate-500);
  --primary: var(--taylr-cobalt-500);
  --primary-pressed: var(--taylr-cobalt-600);
  --on-primary: var(--taylr-paper);
  --link: var(--taylr-cobalt-600);
  --stitch: var(--taylr-cobalt-500);
  --success: var(--taylr-success);
  --warning: var(--taylr-warning);
  --error: var(--taylr-error);

  /* Type */
  --font-display: "Sora", "Avenir Next", system-ui, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --tracking-display: -0.04em;
  --text-display: 48px;  /* Sora 800 */
  --text-h1: 34px;       /* Sora 700 */
  --text-h2: 26px;       /* Sora 700 */
  --text-h3: 20px;       /* Sora 600 */
  --text-body: 16px;     /* Inter 400, line-height 1.5 */
  --text-small: 14px;    /* Inter 400/500 */
  --text-label: 12px;    /* Inter 600, uppercase, +0.08em */
  --text-metric: 40px;   /* Sora 700, tabular numbers */

  /* Shape and space */
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-pill: 999px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;

  /* The stitch motif */
  --stitch-width: 2px;
  --stitch-dash: 6px;
  --stitch-gap: 5px;
  --stitch-inset: 6px;
  --patch-tilt: -10deg;
}

/* Dark theme */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: var(--taylr-ink);
    --surface: var(--taylr-ink-800);
    --surface-raised: var(--taylr-ink-700);
    --border: var(--taylr-ink-600);
    --text: var(--taylr-mist);
    --text-muted: var(--taylr-slate-400);
    --primary: var(--taylr-cobalt-500);
    --primary-pressed: var(--taylr-cobalt-400);
    --on-primary: var(--taylr-paper);
    --link: var(--taylr-cobalt-300);
    --stitch: var(--taylr-cobalt-400);
    --success: #4ADE80;
    --error: #FF6B74;
  }
}
:root[data-theme="dark"] {
  --bg: var(--taylr-ink);
  --surface: var(--taylr-ink-800);
  --surface-raised: var(--taylr-ink-700);
  --border: var(--taylr-ink-600);
  --text: var(--taylr-mist);
  --text-muted: var(--taylr-slate-400);
  --primary: var(--taylr-cobalt-500);
  --primary-pressed: var(--taylr-cobalt-400);
  --on-primary: var(--taylr-paper);
  --link: var(--taylr-cobalt-300);
  --stitch: var(--taylr-cobalt-400);
  --success: #4ADE80;
  --error: #FF6B74;
}