/* ============================================================
   BUDDY B — DESIGN TOKENS v3.0
   Single source of truth — all OKLCH for perceptual uniformity
   ============================================================ */
:root{
  /* ─── color · surface ────────────────────────── */
  --color-surface:        oklch(0.988 0.003 295);
  --color-surface-1:      oklch(0.972 0.005 295);
  --color-surface-2:      oklch(0.955 0.006 295);
  --color-surface-inv:    oklch(0.18  0.025 280);

  /* ─── color · border ─────────────────────────── */
  --color-border:         oklch(0.91  0.008 295);
  --color-border-strong:  oklch(0.83  0.012 295);
  --color-border-inv:     oklch(0.28  0.02 280);

  /* ─── color · ink ────────────────────────────── */
  --color-ink:            oklch(0.18  0.025 280);
  --color-ink-1:          oklch(0.32  0.02  280);
  --color-ink-2:          oklch(0.50  0.015 280);
  --color-ink-3:          oklch(0.66  0.012 280);
  --color-ink-on-inv:     oklch(0.97  0.005 295);

  /* ─── color · ACCENT = brand violet ──────────── */
  --color-accent:         oklch(0.58  0.22  285);
  --color-accent-hover:   oklch(0.52  0.23  285);
  --color-accent-press:   oklch(0.46  0.22  285);
  --color-accent-tint:    oklch(0.95  0.035 285);

  /* ─── color · CONFIRM = save/submit (green) ──── */
  --color-confirm:        oklch(0.66  0.13  150);
  --color-confirm-hover:  oklch(0.60  0.14  150);
  --color-confirm-press:  oklch(0.54  0.14  150);
  --color-confirm-tint:   oklch(0.95  0.06  150);
  --color-confirm-ink:    oklch(0.28  0.10  150);

  /* ─── color · CAUTION = negative state (clay) ── */
  --color-caution:        oklch(0.65  0.14  40);
  --color-caution-hover:  oklch(0.60  0.15  40);
  --color-caution-press:  oklch(0.54  0.15  40);
  --color-caution-tint:   oklch(0.96  0.04  40);
  --color-caution-ink:    oklch(0.32  0.10  40);

  /* ─── color · semantic ───────────────────────── */
  --color-success:        oklch(0.68  0.14  150);
  --color-success-tint:   oklch(0.95  0.06  150);
  --color-warning:        oklch(0.78  0.15  85);
  --color-warning-tint:   oklch(0.96  0.06  85);
  --color-danger:         oklch(0.58  0.20  25);
  --color-danger-tint:    oklch(0.96  0.04  25);
  --color-info:           oklch(0.65  0.13  240);
  --color-info-tint:      oklch(0.95  0.04  240);
  --color-pending:        oklch(0.70  0.12  60);
  --color-pending-tint:   oklch(0.96  0.05  60);

  /* ─── type · families ────────────────────────── */
  --font-sans:  'Poppins', system-ui, -apple-system, sans-serif;
  --font-mono:  'DM Mono', ui-monospace, 'SF Mono', monospace;
  --font-serif: 'Fraunces', Georgia, serif;

  /* ─── type · scale ───────────────────────────── */
  --text-display-xl: 72px;  --lh-display-xl: 0.95; --tr-display-xl: -0.035em;
  --text-display-l:  56px;  --lh-display-l:  1.00; --tr-display-l:  -0.03em;
  --text-display-m:  40px;  --lh-display-m:  1.05; --tr-display-m:  -0.025em;
  --text-display-s:  32px;  --lh-display-s:  1.10; --tr-display-s:  -0.02em;
  --text-heading-l:  24px;  --lh-heading-l:  1.25; --tr-heading-l:  -0.015em;
  --text-heading-m:  20px;  --lh-heading-m:  1.30; --tr-heading-m:  -0.01em;
  --text-heading-s:  17px;  --lh-heading-s:  1.40; --tr-heading-s:  -0.005em;
  --text-body-l:     16px;  --lh-body-l:     1.55; --tr-body-l:      0em;
  --text-body:       15px;  --lh-body:       1.55; --tr-body:        0em;
  --text-body-s:     13px;  --lh-body-s:     1.50; --tr-body-s:      0em;
  --text-caption:    12px;  --lh-caption:    1.40; --tr-caption:     0.005em;
  --text-micro:      11px;  --lh-micro:      1.30; --tr-micro:       0.08em;

  /* ─── spacing · 4-base ───────────────────────── */
  --s-0: 0;     --s-1: 2px;   --s-2: 4px;   --s-3: 6px;
  --s-4: 8px;   --s-5: 12px;  --s-6: 16px;  --s-7: 20px;
  --s-8: 24px;  --s-9: 32px;  --s-10:40px;  --s-11:48px;
  --s-12:64px;  --s-13:80px;  --s-14:96px;  --s-15:128px;

  /* ─── radius ────────────────────────────────── */
  --r-0: 0;     --r-1: 4px;   --r-2: 6px;   --r-3: 8px;
  --r-4: 10px;  --r-5: 12px;  --r-6: 16px;  --r-7: 20px;
  --r-8: 24px;  --r-full: 999px;

  /* ─── elevation ─────────────────────────────── */
  --shadow-xs:    0 1px 0 oklch(0 0 0 / 0.04);
  --shadow-sm:    0 1px 2px oklch(0 0 0 / 0.05), 0 1px 1px oklch(0 0 0 / 0.04);
  --shadow-md:    0 8px 24px -6px oklch(0 0 0 / 0.08), 0 2px 4px oklch(0 0 0 / 0.04);
  --shadow-lg:    0 24px 60px -16px oklch(0 0 0 / 0.14), 0 8px 16px -8px oklch(0 0 0 / 0.06);
  --shadow-xl:    0 48px 120px -24px oklch(0 0 0 / 0.18), 0 16px 32px -16px oklch(0 0 0 / 0.08);
  --shadow-focus: 0 0 0 3px oklch(0.58 0.22 285 / 0.22);

  /* ─── motion ────────────────────────────────── */
  --ease-standard: cubic-bezier(0.2, 0.0, 0.0, 1.0);
  --ease-emphasis: cubic-bezier(0.2, 0.0, 0.0, 1.2);
  --ease-exit:     cubic-bezier(0.4, 0.0, 1.0, 1.0);
  --ease-spring:   cubic-bezier(0.5, 1.5, 0.3, 1);
  --dur-instant: 80ms;
  --dur-fast:    140ms;
  --dur-base:    220ms;
  --dur-slow:    360ms;
  --dur-deliberate: 600ms;
}

@media (prefers-reduced-motion: reduce){
  :root{
    --dur-instant: 0ms; --dur-fast: 0ms; --dur-base: 0ms;
    --dur-slow: 0ms; --dur-deliberate: 0ms;
  }
}