/* Design tokens — The Dental Money Model
   Direction: editorial / clinical-precision. Warm paper, deep ink,
   one accent that only ever means "the number is healthy". */

:root {
  /* Surfaces — warm paper, not sterile white */
  --color-paper:        oklch(97.5% 0.008 85);
  --color-paper-raised: oklch(99% 0.005 85);
  --color-paper-sunk:   oklch(94.5% 0.012 85);
  --color-ink-surface:  oklch(21% 0.025 255);

  /* Text */
  --color-ink:       oklch(22% 0.02 255);
  --color-ink-soft:  oklch(44% 0.018 255);
  --color-ink-faint: oklch(47% 0.016 255);
  --color-on-ink:    oklch(96% 0.008 85);
  --color-on-ink-soft: oklch(76% 0.014 240);

  /* Accent — deep clinical teal. Healthy numbers, primary actions. */
  --color-accent:       oklch(52% 0.098 195);
  --color-accent-deep:  oklch(42% 0.09 197);
  --color-accent-bright:oklch(68% 0.12 192);
  --color-accent-wash:  oklch(94% 0.026 195);

  /* Deficit — clay red. Unhealthy numbers only. Never decorative. */
  --color-deficit:      oklch(54% 0.14 32);
  --color-deficit-wash: oklch(94% 0.03 40);

  /* Caution — amber. The "you haven't measured this" state. */
  --color-caution:      oklch(64% 0.13 72);
  --color-caution-wash: oklch(95% 0.035 80);

  --color-rule:       oklch(88% 0.012 85);
  --color-rule-strong:oklch(78% 0.016 85);

  /* Type */
  --font-display: 'Fraunces', ui-serif, Georgia, 'Times New Roman', serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  --text-micro: 0.6875rem;
  --text-xs:    0.8125rem;
  --text-sm:    0.9375rem;
  --text-base:  clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
  --text-lg:    clamp(1.125rem, 1.05rem + 0.36vw, 1.3125rem);
  --text-xl:    clamp(1.375rem, 1.2rem + 0.75vw, 1.75rem);
  --text-2xl:   clamp(1.75rem, 1.4rem + 1.5vw, 2.5rem);
  --text-3xl:   clamp(2.125rem, 1.5rem + 2.7vw, 3.5rem);
  --text-hero:  clamp(2rem, 1.3rem + 2.9vw, 3.75rem);

  --leading-tight: 1.08;
  --leading-snug:  1.28;
  --leading-body:  1.62;

  /* Space */
  --space-2xs: 0.25rem;
  --space-xs:  0.5rem;
  --space-sm:  0.75rem;
  --space-md:  1rem;
  --space-lg:  1.5rem;
  --space-xl:  2.25rem;
  --space-2xl: 3.5rem;
  --space-section: clamp(4rem, 3rem + 5vw, 8.5rem);
  --gutter: clamp(1rem, 0.5rem + 2.5vw, 2rem);

  --measure: 34rem;
  --width-page: 74rem;
  --width-narrow: 44rem;

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

  --duration-fast: 140ms;
  --duration-normal: 280ms;
  --duration-slow: 620ms;
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-soft: cubic-bezier(0.33, 1, 0.68, 1);

  --shadow-raised: 0 1px 2px oklch(22% 0.02 255 / 0.05),
                   0 4px 12px oklch(22% 0.02 255 / 0.05);
  --shadow-lifted: 0 2px 4px oklch(22% 0.02 255 / 0.06),
                   0 12px 32px oklch(22% 0.02 255 / 0.09);
  --shadow-book:   0 2px 6px oklch(22% 0.02 255 / 0.08),
                   0 18px 50px oklch(22% 0.02 255 / 0.16);
}