/* Design tokens, reset and the visible focus ring.
   This is the only stylesheet that may contain a raw colour, font-size or radius. */

:root {
  /* Brand */
  --pink-50: #fdeef5;
  --pink-100: #fad7e8;
  --pink-300: #e9a6c8;
  --pink-500: #ed4b97;
  --pink-700: #b8306f;
  --indigo-50: #efeff9;
  --indigo-100: #dcdcf1;
  --indigo-500: #4a4ab0;
  --indigo-700: #2f2f8c;
  --indigo-800: #25256f;
  --teal-50: #e4f2ee;
  --teal-600: #0e7c66;

  /* Warm neutrals */
  --ink: #1a1a1a;
  --ink-2: #3b3734;
  --muted: #5c5854;
  --soft: #8a847e;
  --line-strong: #d6cbbf;
  --line: #e6ddd4;
  --line-soft: #eee8e1;
  --paper: #f7f4f0;
  --surface-2: #fbf9f6;
  --surface: #ffffff;

  /* Status */
  --good: #17703f;
  --good-soft: #e3f3ea;
  --good-line: #bfe0cc;
  --warn: #8a5a00;
  --warn-soft: #fdf3dc;
  --warn-line: #f0dcae;
  --bad: #b42318;
  --bad-soft: #fdecea;
  --bad-line: #f3c9c4;

  /* Semantic aliases */
  --accent: var(--pink-500);
  --primary: var(--indigo-700);
  --primary-hover: var(--indigo-800);
  --link: var(--indigo-700);
  --chart-sales: var(--pink-500);
  --chart-spend: var(--teal-600);
  --chart-third: var(--indigo-700);
  --chart-fourth: var(--pink-300);
  --chart-prev: #b7aea5;
  --c-meta: var(--indigo-500);
  --c-google: #2fb79c;
  --c-direct: #c2387c;
  --c-other: #a89f96;
  --on-fill: #ffffff;
  --bad-hover: #fadad6;
  --warn-dot: #c98a10;
  --row-hover: #fcfaf7;
  --toast-icon: #7fd1a3;
  --toast-icon-bad: #f59c93;
  --selbar-danger: #f8a59c;
  --sk-a: #f1ece6;
  --sk-b: #f8f5f1;
  --sk-c: #ece7e1;
  --ok-line: #c9d6c4;
  --ok-soft: #f4f8f2;
  --empty-line: #d4d0ea;
  --empty-soft: #f3f2fb;
  --wait-line: #e4d3b0;
  --wait-soft: #fff8ea;
  --fail-line: #efc7c3;
  --fail-soft: #fff0ef;
  --fail-ink: #9d302a;
  --delta-up: #1d7a32;
  --delta-down: #a3262d;
  --indigo-soft: #ebebf7;
  --menu-on: #f4f4fb;
  --pulse-paper: #f5f2ee;
  --chip-ok-line: #c4e3d1;

  /* Translucent fills used by the shell, menus and overlays */
  --fill-92: rgba(255, 255, 255, 0.92);
  --fill-70: rgba(255, 255, 255, 0.7);
  --fill-40: rgba(255, 255, 255, 0.4);
  --fill-20: rgba(255, 255, 255, 0.2);
  --fill-18: rgba(255, 255, 255, 0.18);
  --fill-10: rgba(255, 255, 255, 0.1);
  --ink-32: rgba(26, 22, 18, 0.32);
  --ink-22: rgba(26, 22, 18, 0.22);
  --ink-08: rgba(26, 22, 18, 0.08);
  --ink-06: rgba(26, 22, 18, 0.06);
  --ink-05: rgba(26, 22, 18, 0.05);
  --black-20: rgba(0, 0, 0, 0.2);
  --scrim: var(--ink-32);
  --overlay: var(--ink-22);
  --scrim-dialog: rgba(20, 20, 20, 0.45);
  --scrim-deep: rgba(20, 16, 40, 0.45);
  --scrim-photo: rgba(20, 20, 20, 0.78);

  /* Typography: system fonts only */
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --text-3xs: 10px;
  --text-2xs: 11px;
  --text-xs: 12px;
  --text-sm: 13px;
  --text-base: 14px;
  --text-lg-btn: 15px;
  --text-md: 16px;
  --text-lg: 18px;
  --text-xl: 22px;
  --text-kpi: 24px;
  --text-2xl: 28px;
  --text-3xl: 34px;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --leading-tight: 1.2;
  --leading-normal: 1.5;

  /* Spacing: 4px grid */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* Radius */
  --radius-2: 2px;
  --radius-3: 3px;
  --radius-5: 5px;
  --radius-xs: 6px;
  --radius-7: 7px;
  --radius-8: 8px;
  --radius-9: 9px;
  --radius-sm: 10px;
  --radius-12: 12px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-pill: 999px;

  /* Elevation */
  --shadow-xs: 0 1px 2px rgba(26, 22, 18, 0.04);
  --shadow-sm: 0 1px 2px rgba(26, 22, 18, 0.04), 0 4px 12px rgba(26, 22, 18, 0.04);
  --shadow-md: 0 4px 10px rgba(26, 22, 18, 0.05), 0 12px 32px rgba(26, 22, 18, 0.08);
  --shadow-lg: 0 10px 24px rgba(26, 22, 18, 0.08), 0 32px 72px rgba(26, 22, 18, 0.14);
  --shadow-knob: 0 1px 2px var(--black-20);
  --focus-ring: 0 0 0 3px rgba(47, 47, 140, 0.28);

  /* Layout */
  --page-max: 1280px;
  --nav-h: 64px;
  --control-h: 38px;
  --control-h-sm: 32px;
  --chart-min: 300px;
  --chart-h: 260px;
  --chart-donut: 170px;
  --select-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235c5854' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { line-height: var(--leading-tight); }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--link); }
img { max-width: 100%; height: auto; }
.num, .table td, .kpi-value, .delta { font-variant-numeric: tabular-nums; }
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .sk, .spin { animation: none; }
}