/* ==========================================================
   KairoFocus — Shared Brand Tokens
   ----------------------------------------------------------
   Single source of truth for color, type, spacing, motion.
   Imported by:
     • The Pomodoro app  (pomodoro.kairofocus.com)
     • The WordPress theme (kairofocus.com)
     • Future apps (Tempo, mobile, etc.)
   Anything brand-relevant lives here. Components ONLY consume
   tokens — never raw hex/px values.
   ========================================================== */

:root {
  /* ---------- Brand colors ---------- */
  /* Refined palette — muted Prussian blue (research-tuned for focus). */
  --kf-accent:        oklch(48% 0.15 254);   /* ≈ #2c5fb8 — muted sapphire */
  --kf-accent-ink:    #ffffff;
  --kf-accent-soft:   oklch(94% 0.04 254);
  --kf-accent-glow:   oklch(48% 0.15 254 / 0.20);

  /* Semantic session colors — work=blue (focus), break=terracotta (warm pause), long=sage (restorative) */
  --kf-work:          oklch(48% 0.15 254);   /* muted Prussian blue */
  --kf-break:         oklch(67% 0.13 45);    /* muted terracotta */
  --kf-long-break:    oklch(58% 0.10 155);   /* sage green */

  /* ---------- Neutral palette (light) ---------- */
  --kf-bg:            #e8e5dd;   /* canvas */
  --kf-bg-2:          #ddd9d0;   /* recessed */
  --kf-surface:       #f2efe8;   /* cards */
  --kf-surface-2:     #ece9e1;
  --kf-ink:           #0e0f10;   /* primary text */
  --kf-ink-2:         #2a2a2c;
  --kf-muted:         #6b6b66;
  --kf-muted-2:       #9a998f;
  --kf-hairline:        rgba(14, 15, 16, 0.08);
  --kf-hairline-strong: rgba(14, 15, 16, 0.14);

  /* ---------- Typography ---------- */
  --kf-font-sans:  "Geist", -apple-system, BlinkMacSystemFont, sans-serif;
  --kf-font-serif: "Instrument Serif", "Cormorant Garamond", Georgia, serif;
  --kf-font-mono:  "Geist Mono", "JetBrains Mono", ui-monospace, monospace;

  --kf-text-xs:   11px;
  --kf-text-sm:   13px;
  --kf-text-base: 15px;
  --kf-text-md:   18px;
  --kf-text-lg:   24px;
  --kf-text-xl:   36px;
  --kf-text-2xl:  56px;
  --kf-text-3xl:  88px;

  /* ---------- Spacing & layout ---------- */
  --kf-pad-xs:  8px;
  --kf-pad-sm:  14px;
  --kf-pad:     24px;
  --kf-pad-lg:  48px;
  --kf-gap:     18px;
  --kf-radius-sm: 10px;
  --kf-radius:    14px;
  --kf-radius-lg: 22px;

  /* ---------- Elevation ---------- */
  --kf-shadow-card: 0 1px 0 rgba(14, 15, 16, 0.04),
                    0 12px 32px -16px rgba(14, 15, 16, 0.08);
  --kf-shadow-pop:  0 20px 60px -20px rgba(14, 15, 16, 0.25),
                    0 2px 8px rgba(14, 15, 16, 0.06);

  /* ---------- Motion ---------- */
  --kf-ease:     cubic-bezier(0.2, 0.9, 0.3, 1);
  --kf-dur-fast: 120ms;
  --kf-dur-med:  240ms;
  --kf-dur-slow: 480ms;
}

/* ----------------------------------------------------------
   Palette: Library (green-primary alternate)
   Same focus research, warmer temperament. Swaps work to forest
   green and pushes blue to the long-break slot.
   ---------------------------------------------------------- */
[data-palette="library"] {
  --kf-accent:        oklch(45% 0.10 155);   /* forest green */
  --kf-accent-soft:   oklch(94% 0.03 155);
  --kf-accent-glow:   oklch(45% 0.10 155 / 0.20);
  --kf-work:          oklch(45% 0.10 155);
  --kf-break:         oklch(60% 0.12 50);    /* clay */
  --kf-long-break:    oklch(52% 0.10 240);   /* dusty blue */
}

/* ---------- Dark theme override ---------- */
[data-theme="dark"] {
  --kf-bg:            #0d0e10;
  --kf-bg-2:          #15161a;
  --kf-surface:       #15161a;
  --kf-surface-2:     #1c1d21;
  --kf-ink:           #f4f3ee;
  --kf-ink-2:         #cfcec8;
  --kf-muted:         #8a8a82;
  --kf-muted-2:       #5b5b54;
  --kf-hairline:        rgba(244, 243, 238, 0.08);
  --kf-hairline-strong: rgba(244, 243, 238, 0.16);
  --kf-accent-soft:   rgba(59, 108, 246, 0.14);
  --kf-shadow-card: 0 1px 0 rgba(0,0,0,0.4), 0 12px 32px -16px rgba(0,0,0,0.6);
  --kf-shadow-pop:  0 24px 80px -20px rgba(0,0,0,0.7), 0 2px 8px rgba(0,0,0,0.4);
}

/* ----------------------------------------------------------
   Aliases — keep current app code working without rename.
   In the future, components should reference --kf-* directly.
   ---------------------------------------------------------- */
:root, [data-theme="dark"] {
  --accent: var(--kf-accent);
  --accent-ink: var(--kf-accent-ink);
  --accent-soft: var(--kf-accent-soft);
  --accent-glow: var(--kf-accent-glow);
  --work: var(--kf-work);
  --break: var(--kf-break);
  --long-break: var(--kf-long-break);
  --bg: var(--kf-bg);
  --bg-2: var(--kf-bg-2);
  --surface: var(--kf-surface);
  --surface-2: var(--kf-surface-2);
  --ink: var(--kf-ink);
  --ink-2: var(--kf-ink-2);
  --muted: var(--kf-muted);
  --muted-2: var(--kf-muted-2);
  --hairline: var(--kf-hairline);
  --hairline-strong: var(--kf-hairline-strong);
  --font-sans: var(--kf-font-sans);
  --font-serif: var(--kf-font-serif);
  --font-mono: var(--kf-font-mono);
  --shadow-card: var(--kf-shadow-card);
  --shadow-pop: var(--kf-shadow-pop);
  --radius: var(--kf-radius);
  --radius-sm: var(--kf-radius-sm);
  --radius-lg: var(--kf-radius-lg);
  --pad: var(--kf-pad);
  --pad-sm: var(--kf-pad-sm);
  --pad-xs: var(--kf-pad-xs);
  --gap: var(--kf-gap);
}