/* ─────────────────────────────────────────────────────────────
   Kapy Design System — Tokens
   v1.0 · Extracted from v1-pro-timeline
   ─────────────────────────────────────────────────────────────

   These are the single source of truth for the visual system.
   All components reference these tokens — never hardcode colors
   or font stacks in component CSS.

   Convention :
   - bg / surface / surface-2 / surface-3 : 4 niveaux de fond
   - fg / muted / soft : 3 niveaux de texte (du plus contrasté au plus discret)
   - border / border-strong : 2 niveaux de bordure
   - accent / accent-soft / accent-deep : indigo principal
   - pos / neg / warn : couleurs de statut (et leurs variantes "-soft")
   ───────────────────────────────────────────────────────────── */

:root {
  /* ── Surfaces ───────────────────────────────────────────── */
  --kp-bg:          oklch(99% 0.003 250);   /* App background */
  --kp-surface:     oklch(100% 0 0);         /* Cards, modals, drawers */
  --kp-surface-2:   oklch(98% 0.004 250);   /* Hover, secondary cards */
  --kp-surface-3:   oklch(96% 0.005 250);   /* Tertiary, tag backgrounds */

  /* ── Text ───────────────────────────────────────────────── */
  --kp-fg:          oklch(18% 0.012 250);   /* Primary text */
  --kp-muted:       oklch(48% 0.012 250);   /* Secondary text */
  --kp-soft:        oklch(62% 0.012 250);   /* Tertiary text, captions */

  /* ── Borders ────────────────────────────────────────────── */
  --kp-border:        oklch(92% 0.005 250);  /* Default hairline */
  --kp-border-strong: oklch(85% 0.008 250);  /* Hover, focus state */

  /* ── Accent (indigo) ────────────────────────────────────── */
  --kp-accent:       oklch(54% 0.19 262);    /* Primary action */
  --kp-accent-soft:  oklch(96% 0.025 262);  /* Hover/selected background */
  --kp-accent-deep:  oklch(48% 0.19 262);    /* Pressed/active state */

  /* ── Status colors ──────────────────────────────────────── */
  --kp-pos:        oklch(58% 0.14 155);    /* Positive (revenue, gains) */
  --kp-pos-soft:   oklch(96% 0.04 155);
  --kp-neg:        oklch(58% 0.18 25);     /* Negative (expenses, losses) */
  --kp-neg-soft:   oklch(96% 0.03 25);
  --kp-warn:       oklch(70% 0.14 80);     /* Warning, attention */
  --kp-warn-soft:  oklch(96% 0.04 80);

  /* ── Typography ─────────────────────────────────────────── */
  --kp-font-display: -apple-system, BlinkMacSystemFont, 'SF Pro Display', Inter, system-ui, sans-serif;
  --kp-font-body:    -apple-system, BlinkMacSystemFont, 'SF Pro Text', Inter, system-ui, sans-serif;
  --kp-font-mono:    'SF Mono', ui-monospace, 'JetBrains Mono', Menlo, monospace;

  /* Type scale (display) */
  --kp-text-xs:   11px;
  --kp-text-sm:   12px;
  --kp-text-md:   13px;
  --kp-text-base: 14px;
  --kp-text-lg:   16px;
  --kp-text-xl:   17px;
  --kp-text-2xl:  20px;
  --kp-text-3xl:  24px;
  --kp-text-4xl:  28px;
  --kp-text-5xl:  36px;
  --kp-text-6xl:  56px; /* Hero number (big-result) */

  /* Letter spacing */
  --kp-tracking-tight: -0.025em;
  --kp-tracking-snug:  -0.015em;
  --kp-tracking-wide:  0.06em;
  --kp-tracking-wider: 0.08em;
  --kp-tracking-widest: 0.16em;

  /* ── Spacing / Radius ───────────────────────────────────── */
  --kp-r-xs:  4px;
  --kp-r-sm:  6px;
  --kp-r:     10px;   /* default */
  --kp-r-md:  12px;
  --kp-r-lg:  14px;
  --kp-r-xl:  16px;
  --kp-r-pill: 999px;

  /* ── Shadows ────────────────────────────────────────────── */
  --kp-shadow-sm: 0 1px 2px rgba(20, 30, 60, 0.04);
  --kp-shadow-md: 0 4px 12px rgba(20, 30, 60, 0.08), 0 1px 3px rgba(20, 30, 60, 0.05);
  --kp-shadow-lg: 0 16px 40px rgba(20, 30, 60, 0.14), 0 2px 6px rgba(20, 30, 60, 0.06);
  --kp-shadow-accent: 0 0 0 3px var(--kp-accent-soft);
  --kp-shadow-focus: 0 0 0 3px var(--kp-accent-soft);

  /* ── Animation timing ───────────────────────────────────── */
  --kp-ease-out:  cubic-bezier(0.22, 1, 0.36, 1);   /* Natural deceleration */
  --kp-ease-in-out: cubic-bezier(0.16, 1, 0.3, 1);  /* Drawer slide */
  --kp-dur-fast:  120ms;
  --kp-dur-base:  180ms;
  --kp-dur-slow:  280ms;
  --kp-dur-bar:   1100ms; /* Bar reveal / count-up */

  /* ── Z-index scale ──────────────────────────────────────── */
  --kp-z-menu:        200;
  --kp-z-modal-bg:    500;
  --kp-z-modal:       600;
  --kp-z-drawer-bg:   700;
  --kp-z-drawer:      800;
  --kp-z-test-dock:   850;
  --kp-z-toast:       900;
  --kp-z-overlay:     950;
}

/* ── Optional dark theme (placeholder, not yet used) ─────── */
:root[data-theme="dark"] {
  --kp-bg:          oklch(15% 0.012 250);
  --kp-surface:     oklch(19% 0.014 250);
  --kp-surface-2:   oklch(22% 0.014 250);
  --kp-surface-3:   oklch(25% 0.014 250);
  --kp-fg:          oklch(96% 0.005 250);
  --kp-muted:       oklch(72% 0.012 250);
  --kp-soft:        oklch(56% 0.012 250);
  --kp-border:      oklch(28% 0.012 250);
  --kp-border-strong: oklch(38% 0.014 250);
}

/* ── Utility classes shipped with tokens ─────────────────── */
.kp-num   { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum'; letter-spacing: -0.01em; }
.kp-mono  { font-family: var(--kp-font-mono); }
.kp-mute  { color: var(--kp-muted); }
.kp-soft  { color: var(--kp-soft); }
.kp-pos   { color: var(--kp-pos); }
.kp-neg   { color: var(--kp-neg); }
.kp-acc   { color: var(--kp-accent); }