/* ==========================================================================
   iCali — Design Tokens
   Light mode = blue accent.  Dark mode = purple accent.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Geist+Mono:wght@400;500&display=swap');

:root {
  /* ---- Type ---- */
  --font-sans: 'Plus Jakarta Sans', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-serif: 'Plus Jakarta Sans', ui-sans-serif, system-ui, sans-serif;
  --font-mono: 'Geist Mono', ui-monospace, 'SF Mono', monospace;

  --text-2xs: 11px;
  --text-xs:  12px;
  --text-sm:  14px;
  --text-base:16px;
  --text-md:  18px;
  --text-lg:  22px;
  --text-xl:  28px;
  --text-2xl: 36px;
  --text-3xl: 48px;
  --text-4xl: 64px;
  --text-5xl: 88px;
  --text-6xl: 128px;

  --leading-tight: 1.05;
  --leading-snug: 1.2;
  --leading-normal: 1.45;
  --leading-loose: 1.6;

  --tracking-tight: -0.02em;
  --tracking-tighter: -0.035em;
  --tracking-normal: 0;
  --tracking-wide: 0.04em;
  --tracking-widest: 0.18em;

  /* ---- Space (4px rhythm) ---- */
  --s-0: 0;
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-7: 32px;
  --s-8: 40px;
  --s-9: 56px;
  --s-10: 72px;
  --s-11: 96px;
  --s-12: 128px;

  /* ---- Radius ---- */
  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-2xl: 40px;
  --r-full: 999px;

  /* ---- Light mode (default) — cool-neutral w/ sky blue accent ---- */
  --bg-0: #F7F7F4;          /* app background */
  --bg-1: #FFFFFF;          /* surface */
  --bg-2: #F0EFEB;          /* subtle surface */
  --bg-3: #E7E5DF;          /* recessed */
  --line-1: rgba(18, 18, 22, 0.08);
  --line-2: rgba(18, 18, 22, 0.14);

  --ink-1: #111114;         /* primary text */
  --ink-2: #3C3C43;
  --ink-3: #6B6B73;
  --ink-4: #9A9AA0;
  --ink-5: #BFBFC4;

  --accent: oklch(0.68 0.15 232);      /* sky blue */
  --accent-soft: oklch(0.94 0.04 232);
  --accent-ink: oklch(0.45 0.16 232);
  --accent-contrast: #FFFFFF;

  /* Calendar pastels (event chip fills) */
  --cal-peach:  oklch(0.92 0.05 40);
  --cal-butter: oklch(0.94 0.08 95);
  --cal-blush:  oklch(0.92 0.04 0);
  --cal-sky:    oklch(0.92 0.04 232);
  --cal-violet: oklch(0.92 0.05 300);
  --cal-sage:   oklch(0.92 0.05 140);

  --cal-peach-ink:  oklch(0.45 0.12 40);
  --cal-butter-ink: oklch(0.45 0.14 95);
  --cal-blush-ink:  oklch(0.48 0.12 0);
  --cal-sky-ink:    oklch(0.48 0.14 232);
  --cal-violet-ink: oklch(0.45 0.15 300);
  --cal-sage-ink:   oklch(0.42 0.10 140);

  /* Semantic */
  --ok:   oklch(0.62 0.16 150);
  --warn: oklch(0.72 0.16 70);
  --bad:  oklch(0.60 0.20 25);

  /* Shadows */
  --sh-1: 0 1px 2px rgba(18,18,22,0.04), 0 1px 1px rgba(18,18,22,0.03);
  --sh-2: 0 4px 10px -4px rgba(18,18,22,0.08), 0 2px 4px rgba(18,18,22,0.04);
  --sh-3: 0 20px 40px -20px rgba(18,18,22,0.18), 0 8px 16px -8px rgba(18,18,22,0.08);
  --sh-4: 0 40px 80px -30px rgba(18,18,22,0.28), 0 16px 32px -16px rgba(18,18,22,0.10);

  /* Motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-1: 120ms;
  --dur-2: 220ms;
  --dur-3: 420ms;
}

[data-theme="dark"] {
  --bg-0: #0E0D12;
  --bg-1: #17151C;
  --bg-2: #1F1D25;
  --bg-3: #2A2830;
  --line-1: rgba(255, 255, 255, 0.08);
  --line-2: rgba(255, 255, 255, 0.14);

  --ink-1: #F4F2F7;
  --ink-2: #CFCDD5;
  --ink-3: #8F8D98;
  --ink-4: #6A6772;
  --ink-5: #48454F;

  --accent: oklch(0.62 0.23 310);      /* vivid purple */
  --accent-soft: oklch(0.28 0.12 310);
  --accent-ink: oklch(0.80 0.18 310);
  --accent-contrast: #FFFFFF;

  /* Dark-mode calendar chips are deeper */
  --cal-peach:  oklch(0.32 0.08 40);
  --cal-butter: oklch(0.34 0.10 95);
  --cal-blush:  oklch(0.32 0.08 0);
  --cal-sky:    oklch(0.32 0.08 232);
  --cal-violet: oklch(0.32 0.10 300);
  --cal-sage:   oklch(0.30 0.08 140);

  --cal-peach-ink:  oklch(0.80 0.12 40);
  --cal-butter-ink: oklch(0.85 0.14 95);
  --cal-blush-ink:  oklch(0.82 0.12 0);
  --cal-sky-ink:    oklch(0.82 0.14 232);
  --cal-violet-ink: oklch(0.82 0.15 300);
  --cal-sage-ink:   oklch(0.80 0.12 140);

  --sh-1: 0 1px 2px rgba(0,0,0,0.40), 0 1px 1px rgba(0,0,0,0.30);
  --sh-2: 0 4px 10px -4px rgba(0,0,0,0.55), 0 2px 4px rgba(0,0,0,0.40);
  --sh-3: 0 20px 40px -20px rgba(0,0,0,0.70), 0 8px 16px -8px rgba(0,0,0,0.50);
  --sh-4: 0 40px 80px -30px rgba(0,0,0,0.80), 0 16px 32px -16px rgba(0,0,0,0.60);
}

/* Reset + base */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--ink-1);
  background: var(--bg-0);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background var(--dur-3) var(--ease-out), color var(--dur-3) var(--ease-out);
}
img { max-width: 100%; display: block; }
button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }
a { color: inherit; text-decoration: none; }

/* Utility: serif display */
.serif { font-family: var(--font-serif); font-weight: 400; letter-spacing: -0.01em; }
.mono  { font-family: var(--font-mono); }
.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-widest);
  color: var(--ink-3);
}