/* Joyride design tokens. Single source of truth for color, type, radius, motion. */
:root {
  /* Brand */
  --blue: #2455d6;
  --blue-ink: #1b45b8;
  --blue-soft: #e8eeff;
  --blue-deep: #071b57;

  /* Surfaces and ink (marketing, light) */
  --paper: #f4f4f1;
  --paper-2: #ffffff;
  --paper-3: #ebebe6;
  --ink: #0a1740;
  --ink-2: #3b4664;
  --ink-3: #69738b;
  --line: rgba(16, 17, 20, 0.10);
  --line-strong: rgba(16, 17, 20, 0.18);

  /* Data palette: vivid blues, purples, and turquoises that sit with the brand blue (Artificial Analysis spirit).
     Series take colors in order; the first four carry most figures. */
  --p1: #2455d6; /* blue */
  --p2: #7f4bf3; /* purple */
  --p3: #12c2b0; /* turquoise */
  --p4: #1c9bf8; /* sky */
  --p5: #a855f7; /* violet */
  --p6: #0e9488; /* teal */
  --p7: #4338ca; /* indigo */
  --p8: #22d3ee; /* cyan */
  --ai: var(--p2);
  --human: #c3c8d4; /* neutral: the human share reads as the baseline, like an "unassisted" series */
  --mixed: var(--p3);
  --chip: #eceef2;
  --chip-ink: #3b4664;
  --logo-ink: #9aa0ae;
  --claude: #d97757; /* Claude's orange */
  --cursor: #2b2b2b; /* Cursor's charcoal */

  /* Type */
  --font-sans: "Inter Tight", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-mono: "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace;

  /* Radius */
  --radius-sm: 6px;
  --radius: 10px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  /* Motion */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur: 700ms;
  --dur-slow: 1400ms;

  /* Layout */
  --max: 1200px;
  --gutter: 24px;

  /* App */
  --app-bg: #fbfbfa;
  --app-side: #f3f2ee;
  --app-card: #ffffff;
}

:root[data-theme="dark"] {
  --paper: #0f1013;
  --paper-2: #16171b;
  --paper-3: #1d1e23;
  --ink: #f2f2f0;
  --ink-2: #b8b9bd;
  --ink-3: #7c7e86;
  --line: rgba(255, 255, 255, 0.10);
  --line-strong: rgba(255, 255, 255, 0.18);
  --blue-soft: #1a2352;
  --chip: #24262d;
  --chip-ink: #b8b9bd;
  --logo-ink: #5d616c;
  --cursor: #c9c9c9;
  --human: #4a4f5c;
  --app-bg: #0f1013;
  --app-side: #131418;
  --app-card: #16171b;
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur: 1ms; --dur-slow: 1ms; }
}