/* ============================================================
   Design tokens — furet.io / Ads Research Dashboard
   ----------------------------------------------------------
   Paper · Coral · IBM Plex · Spacious · Shadow · 20 px radius
   ============================================================ */

:root {
  /* ───── Ink ramp (warm paper) ───── */
  --ink-50:  #f5f2ec;
  --ink-100: #fbf9f4;
  --ink-200: #f1ede4;
  --ink-300: #e6e1d4;
  --ink-400: #d8d2c2;
  --ink-500: #b8b1a0;
  --ink-600: #7e786b;
  --ink-700: #524e44;
  --ink-800: #2e2c26;
  --ink-900: #14130f;

  /* ───── Semantic ───── */
  --accent:      oklch(72% 0.16 35);
  --accent-soft: color-mix(in oklab, var(--accent) 14%, transparent);
  --pos:         oklch(70% 0.14 150);
  --neg:         oklch(66% 0.18 25);
  --warn:        oklch(75% 0.13 70);

  /* ───── Spacing / rhythm (spacious density) ───── */
  --pad-page: 48px;
  --pad-card: 28px;
  --gap:      16px;
  --row:      56px;

  /* ───── Radii ───── */
  --radius:    20px;
  --radius-sm: 10px;
  --radius-lg: 30px;

  /* ───── Typography ───── */
  --font-display: "IBM Plex Sans", system-ui, sans-serif;
  --font-body:    "IBM Plex Sans", system-ui, sans-serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, monospace;
  --num-font:     "IBM Plex Mono", ui-monospace, monospace;

  /* ───── Elevation (shipped: "Shadow" cards) ───── */
  --card-bg:     var(--ink-100);
  --card-border: transparent;
  --card-shadow: 0 1px 2px rgba(0, 0, 0, 0.04),
                 0 6px 24px -8px rgba(0, 0, 0, 0.18);
  --border-w:    0px;

  /* ───── Motion ───── */
  --motion-fast: 120ms;
  --motion-base: 150ms;
  --motion-slow: 250ms;
}

.num,
[data-num] {
  font-family: var(--num-font);
  font-variant-numeric: tabular-nums;
}

:where(button, a, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}