/* DraftQueens design tokens. Neutrals carry a faint green bias (hue 150) so
   they agree with the brand green. Dark is the house default (it's a book);
   [data-theme="light"] flips the scale for editorial surfaces. */
:root {
  --gray-1: oklch(0.17 0.006 150);
  --gray-2: oklch(0.205 0.006 150);
  --gray-3: oklch(0.245 0.007 150);
  --gray-4: oklch(0.29 0.007 150);
  --gray-5: oklch(0.33 0.008 150);
  --gray-6: oklch(0.37 0.008 150);
  --gray-8: oklch(0.50 0.008 150);
  --gray-9: oklch(0.66 0.008 150);
  --gray-11: oklch(0.80 0.006 150);
  --gray-12: oklch(0.965 0.004 150);

  --brand: oklch(0.80 0.21 142);
  --brand-hover: color-mix(in oklch, var(--brand) 88%, black);
  --brand-ink: oklch(0.20 0.04 142);
  --brand-dim: oklch(0.80 0.21 142 / 0.14);

  --gold: oklch(0.85 0.155 88);
  --gold-ink: oklch(0.28 0.06 88);
  --danger: oklch(0.70 0.18 25);
  --up: oklch(0.80 0.18 150);
  --down: oklch(0.72 0.17 25);

  --border: var(--gray-5);
  --ring: 0 0 0 1px oklch(1 0 0 / 0.09);
  --ring-hover: 0 0 0 1px oklch(1 0 0 / 0.14);
  --hairline: 1px;

  --radius-lg: 12px;
  --radius-md: 8px;
  --radius-sm: 4px;

  --ease-out: cubic-bezier(0.32, 0.72, 0, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --dur-hover: 150ms;
  --dur-enter: 220ms;
  --dur-exit: 160ms;

  --font-ui: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display: "Barlow Condensed", "Arial Narrow", Impact, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
}

[data-theme="light"] {
  --gray-1: oklch(0.99 0.002 150);
  --gray-2: oklch(0.965 0.004 150);
  --gray-3: oklch(0.935 0.005 150);
  --gray-4: oklch(0.90 0.006 150);
  --gray-5: oklch(0.86 0.006 150);
  --gray-6: oklch(0.80 0.007 150);
  --gray-8: oklch(0.62 0.008 150);
  --gray-9: oklch(0.48 0.008 150);
  --gray-11: oklch(0.33 0.008 150);
  --gray-12: oklch(0.17 0.006 150);

  --brand: oklch(0.56 0.17 142);
  --brand-hover: color-mix(in oklch, var(--brand) 88%, black);
  --brand-ink: oklch(0.99 0.01 142);
  --brand-dim: oklch(0.56 0.17 142 / 0.12);
  --gold: oklch(0.72 0.15 80);
  --gold-ink: oklch(0.22 0.05 80);
  --danger: oklch(0.56 0.2 25);
  --up: oklch(0.56 0.17 150);
  --down: oklch(0.58 0.19 25);

  --border: oklch(0 0 0 / 0.08);
  --ring: 0 0 0 1px oklch(0 0 0 / 0.06), 0 1px 3px oklch(0 0 0 / 0.05), 0 4px 10px -4px oklch(0 0 0 / 0.06);
  --ring-hover: 0 0 0 1px oklch(0 0 0 / 0.08), 0 1px 3px oklch(0 0 0 / 0.07), 0 4px 10px -4px oklch(0 0 0 / 0.09);
}

@media (min-resolution: 192dpi) { :root { --hairline: 0.5px; } }