/* Kalibr Design Tokens — Warm / humanistic, Calm × Notion */
:root {
  /* Warm neutrals */
  --k-bg: #faf8f3;
  --k-bg-2: #f2ede3;
  --k-bg-3: #e8e2d3;
  --k-surface: #ffffff;
  --k-surface-sunk: #f6f1e7;
  --k-ink: #1f1b16;
  --k-ink-2: #3d362d;
  --k-ink-3: #6b6257;
  --k-ink-4: #9a9184;
  --k-line: #e5dfd2;
  --k-line-strong: #d4ccba;

  /* Accents — shared chroma 0.09, L 0.62, varied hue */
  --k-accent: oklch(0.62 0.11 42);        /* terracotta (brand primary) */
  --k-accent-soft: oklch(0.94 0.03 42);
  --k-accent-ink: oklch(0.34 0.07 42);
  --k-sage: oklch(0.62 0.09 150);         /* success / high cohesion */
  --k-sage-soft: oklch(0.94 0.025 150);
  --k-sage-ink: oklch(0.34 0.06 150);
  --k-sun: oklch(0.72 0.11 78);           /* caution / amber */
  --k-sun-soft: oklch(0.95 0.04 78);
  --k-sun-ink: oklch(0.42 0.08 78);
  --k-rose: oklch(0.62 0.11 20);          /* friction / low cohesion */
  --k-rose-soft: oklch(0.94 0.03 20);
  --k-rose-ink: oklch(0.38 0.08 20);
  --k-indigo: oklch(0.52 0.09 265);       /* data accents */
  --k-indigo-soft: oklch(0.94 0.025 265);

  /* Type */
  --k-serif: "Source Serif 4", "Source Serif Pro", Georgia, serif;
  --k-sans: "Inter Tight", "Söhne", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --k-mono: "JetBrains Mono", "IBM Plex Mono", ui-monospace, Menlo, monospace;

  /* Radius */
  --r-1: 4px;
  --r-2: 8px;
  --r-3: 12px;
  --r-4: 16px;
  --r-5: 24px;
  --r-round: 999px;

  /* Shadow */
  --sh-1: 0 1px 2px rgba(30, 20, 10, 0.04), 0 1px 3px rgba(30, 20, 10, 0.03);
  --sh-2: 0 2px 6px rgba(30, 20, 10, 0.05), 0 6px 20px rgba(30, 20, 10, 0.05);
  --sh-3: 0 8px 24px rgba(30, 20, 10, 0.08), 0 18px 48px rgba(30, 20, 10, 0.08);
  --sh-inset: inset 0 0 0 1px var(--k-line);
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--k-bg); color: var(--k-ink); font-family: var(--k-sans); -webkit-font-smoothing: antialiased; }
button { font-family: inherit; }

/* Typographic helpers */
.k-serif { font-family: var(--k-serif); font-weight: 400; letter-spacing: -0.01em; }
.k-mono { font-family: var(--k-mono); font-variant-numeric: tabular-nums; }

/* Component base classes */
.k-card { background: var(--k-surface); border: 1px solid var(--k-line); border-radius: var(--r-4); box-shadow: var(--sh-1); }
.k-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--k-sans); font-weight: 500; font-size: 14px; letter-spacing: -0.005em;
  height: 36px; padding: 0 14px; border-radius: var(--r-round); border: 1px solid transparent;
  cursor: pointer; transition: all .15s ease; text-decoration: none;
}
.k-btn--primary { background: var(--k-ink); color: var(--k-bg); }
.k-btn--primary:hover { background: var(--k-accent-ink); }
.k-btn--accent { background: var(--k-accent); color: #fff; }
.k-btn--accent:hover { filter: brightness(0.95); }
.k-btn--ghost { background: transparent; color: var(--k-ink-2); border-color: var(--k-line-strong); }
.k-btn--ghost:hover { background: var(--k-surface-sunk); }
.k-btn--lg { height: 44px; padding: 0 20px; font-size: 15px; }
.k-btn--sm { height: 28px; padding: 0 10px; font-size: 12.5px; }

.k-chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px;
  border-radius: var(--r-round); font-size: 12px; font-weight: 500;
  background: var(--k-surface-sunk); color: var(--k-ink-3); border: 1px solid var(--k-line);
}
.k-chip--sage { background: var(--k-sage-soft); color: var(--k-sage-ink); border-color: transparent; }
.k-chip--sun { background: var(--k-sun-soft); color: var(--k-sun-ink); border-color: transparent; }
.k-chip--rose { background: var(--k-rose-soft); color: var(--k-rose-ink); border-color: transparent; }
.k-chip--accent { background: var(--k-accent-soft); color: var(--k-accent-ink); border-color: transparent; }

.k-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--k-ink-4); font-weight: 600; }

/* Focus ring */
:focus-visible { outline: 2px solid var(--k-accent); outline-offset: 2px; border-radius: 4px; }

/* Scrollable area scrollbar */
.k-scroll::-webkit-scrollbar { width: 8px; height: 8px; }
.k-scroll::-webkit-scrollbar-thumb { background: var(--k-line-strong); border-radius: 4px; }
.k-scroll::-webkit-scrollbar-track { background: transparent; }