/* breathingCode tokens. Hex lives here only (rules 31, 32, 58). */
:root {
  --color-dark: #0e1f1b;
  --color-surface: #1a3c34;
  --color-teal: #00d4aa;
  --color-cream: #f5f0e8;
  --color-error: #f87171;
  --color-warning: #fbbf24;

  --rgb-dark: 14 31 27;
  --rgb-surface: 26 60 52;
  --rgb-teal: 0 212 170;
  --rgb-cream: 245 240 232;

  --color-teal-10: rgb(var(--rgb-teal) / 0.1);
  --color-teal-20: rgb(var(--rgb-teal) / 0.2);
  --color-teal-30: rgb(var(--rgb-teal) / 0.3);
  --color-teal-40: rgb(var(--rgb-teal) / 0.4);
  --color-teal-70: rgb(var(--rgb-teal) / 0.7);
  --color-teal-85: rgb(var(--rgb-teal) / 0.85);

  --color-cream-40: rgb(var(--rgb-cream) / 0.4);
  --color-cream-50: rgb(var(--rgb-cream) / 0.5);
  --color-cream-60: rgb(var(--rgb-cream) / 0.6);
  --color-cream-70: rgb(var(--rgb-cream) / 0.7);
  --color-cream-78: rgb(var(--rgb-cream) / 0.78);
  --color-cream-90: rgb(var(--rgb-cream) / 0.9);
  --color-cream-92: rgb(var(--rgb-cream) / 0.92);

  --bg-page: var(--color-dark);
  --bg-card: var(--color-surface);
  --bg-action: var(--color-teal);
  --bg-action-hover: var(--color-teal-85);
  --text-primary: var(--color-cream);
  --text-body: var(--color-cream-90);
  --text-muted: var(--color-cream-70);
  --text-accent: var(--color-teal);
  --text-on-action: var(--color-dark);
  --border-default: var(--color-teal-20);
  --border-strong: rgb(var(--rgb-teal) / 0.22);
  --border-subtle: rgb(var(--rgb-teal) / 0.12);
  --border-hover: var(--color-teal-40);
  --focus-ring: var(--color-teal);

  --font-display: 'Fraunces', Georgia, serif;
  --font-mono: 'DM Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  --measure-page: 72rem;
  --radius-card: 0.75rem;
  --space-touch: 44px;
  --motion-quick: 150ms;
  --motion-base: 300ms;
  --motion-slow: 600ms;
  --motion-reveal: 900ms;
  --duration-breathe: 6s;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --reveal-y: 20px;
}