/* =========================================================
   Analytics Portal — Design Tokens
   Source of truth. Copy this file into Claude Code projects
   so future designs match. Do not invent new tokens.
   ========================================================= */

:root {
  /* ---------- Surfaces ---------- */
  --bg:           #FAFAF7;        /* app background, warm off-white */
  --surface:      #FFFFFF;        /* cards, modals */
  --surface-alt:  #F4F2EE;        /* subtle blocks, hover rows */
  --surface-sunk: #EFEDE8;        /* inputs background, code blocks */

  /* ---------- Borders ---------- */
  --border:       #E6E3DC;        /* default 1px hairline */
  --border-strong:#D4D0C7;        /* dividers, focus border */
  --border-soft:  #EFEDE8;        /* very subtle */

  /* ---------- Text ---------- */
  --text:         #1C1B19;        /* primary, ~oklch(.20 .005 70) */
  --text-muted:   #64615A;        /* secondary */
  --text-soft:    #8C8980;        /* hints, captions */
  --text-faint:   #B7B4AB;        /* placeholders */
  --text-on-accent:#FFFFFF;

  /* ---------- Accent (indigo, calm) ---------- */
  --accent:        oklch(0.55 0.14 265);
  --accent-hover:  oklch(0.50 0.15 265);
  --accent-active: oklch(0.45 0.16 265);
  --accent-soft:   oklch(0.95 0.03 265);   /* tint backgrounds */
  --accent-border: oklch(0.85 0.06 265);

  /* ---------- Semantics (matched L/C, varied hue) ---------- */
  --success:        oklch(0.58 0.13 155);
  --success-soft:   oklch(0.95 0.04 155);
  --success-border: oklch(0.82 0.07 155);

  --warn:           oklch(0.70 0.14 75);
  --warn-soft:      oklch(0.95 0.05 75);
  --warn-border:    oklch(0.83 0.09 75);

  --danger:         oklch(0.58 0.18 25);
  --danger-soft:    oklch(0.95 0.04 25);
  --danger-border:  oklch(0.84 0.08 25);

  --info:           oklch(0.58 0.10 235);
  --info-soft:      oklch(0.95 0.03 235);

  /* ---------- Chart series (categorical, colour-blind friendly) ---------- */
  --c-1: oklch(0.55 0.14 265);   /* indigo  — primary */
  --c-2: oklch(0.62 0.13 155);   /* green   — Shopify/revenue */
  --c-3: oklch(0.70 0.14 75);    /* amber   — Meta */
  --c-4: oklch(0.58 0.18 25);    /* red     — danger/loss */
  --c-5: oklch(0.58 0.10 235);   /* teal    — Google */
  --c-6: oklch(0.50 0.10 320);   /* plum    — Klaviyo */

  /* ---------- Type ---------- */
  --font-sans: "Inter Tight", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  --fs-xs:   11px;   --lh-xs: 16px;
  --fs-sm:   12px;   --lh-sm: 18px;
  --fs-base: 13px;   --lh-base: 20px;
  --fs-md:   14px;   --lh-md: 22px;
  --fs-lg:   16px;   --lh-lg: 24px;
  --fs-xl:   20px;   --lh-xl: 28px;
  --fs-2xl:  24px;   --lh-2xl: 32px;
  --fs-3xl:  32px;   --lh-3xl: 40px;
  --fs-display: 44px; --lh-display: 52px;

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semibold:600;
  --fw-bold:    700;

  /* ---------- Spacing (4px scale) ---------- */
  --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:  48px;
  --s-10: 64px;

  /* ---------- Radii ---------- */
  --r-xs: 3px;
  --r-sm: 5px;     /* default — chips, inputs, buttons */
  --r-md: 8px;     /* cards */
  --r-lg: 12px;    /* modals, large cards */
  --r-pill: 999px;

  /* ---------- Shadows (subtle, no blur halo) ---------- */
  --sh-xs: 0 1px 0 rgba(28,27,25,0.04);
  --sh-sm: 0 1px 2px rgba(28,27,25,0.05), 0 0 0 1px rgba(28,27,25,0.04);
  --sh-md: 0 4px 12px -2px rgba(28,27,25,0.08), 0 0 0 1px rgba(28,27,25,0.04);
  --sh-lg: 0 12px 32px -8px rgba(28,27,25,0.12), 0 0 0 1px rgba(28,27,25,0.04);
  --sh-focus: 0 0 0 3px oklch(0.55 0.14 265 / 0.25);

  /* ---------- Sizing ---------- */
  --control-h-sm: 26px;
  --control-h:    32px;     /* default input/button */
  --control-h-lg: 40px;
  --row-h:        36px;     /* table row */
  --row-h-compact:28px;

  --sidebar-w: 248px;
  --sidebar-w-collapsed: 56px;
  --topbar-h: 52px;

  /* ---------- Motion ---------- */
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --dur-1: 80ms;
  --dur-2: 140ms;
  --dur-3: 220ms;
}

/* ---------- Base reset ---------- */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "ss01", "cv11";
}
.mono, .num { font-family: var(--font-mono); font-feature-settings: "tnum" 1, "zero" 1; }
.tnum { font-variant-numeric: tabular-nums; }

button { font: inherit; color: inherit; }
input, select, textarea { font: inherit; color: inherit; }

/* selection */
::selection { background: var(--accent-soft); color: var(--text); }

/* scrollbar (subtle) */
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 999px; border: 2px solid var(--bg); }
*::-webkit-scrollbar-track { background: transparent; }