/* Isee design tokens v1 — colours sampled from Francis's logo (isee-logo.png) */
:root {
  /* Brand */
  --brand: #F22915;          /* exact logo red: logo, hero accents, chart highlight, focus ring */
  --brand-strong: #D21F0E;   /* buttons + text links (white on this = AA 5:1) */
  --brand-hover: #B81A0B;
  --brand-soft: #FDECEA;     /* tinted backgrounds, selected rows, badges */

  /* Neutrals (light) */
  --bg: #FFFFFF;
  --surface: #FAFAF9;
  --surface-2: #F3F3F1;
  --border: #E7E5E4;         /* hairline 1px */
  --text: #111111;
  --text-muted: #6B6B6B;
  --text-subtle: #9A9A9A;

  /* Data colours — red is brand, so it must NOT mean "down" */
  --up: #16A34A;
  --down: #71717A;           /* declines shown neutral grey, not red */
  --warn: #D97706;
  --chart-1: #F22915;        /* visitors / primary series */
  --chart-2: #111111;        /* revenue */
  --chart-3: #A1A1AA;        /* comparison period */
  --chart-4: #FB923C;
  --chart-5: #2563EB;

  /* Type (logo is geometric with round terminals) */
  --font-display: "PP Neue Montreal", "Inter Tight", system-ui, sans-serif;  /* Dala style; Inter Tight is the free stand-in */
  --font-ui: "PP Neue Montreal", "Inter Tight", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;  /* numbers in tables */
  --fs-hero: clamp(56px, 8vw, 112px);
  --fs-h1: 32px; --fs-h2: 22px; --fs-body: 15px; --fs-small: 13px; --fs-kpi: 36px;
  --fw-display: 400; --fw-ui: 400;  /* hierarchy from size, not weight */
  --tracking-display: -0.045em;

  /* Shape + space (logo corners are rounded, so UI is too) */
  --radius-sm: 6px; --radius: 10px; --radius-lg: 16px; --radius-pill: 999px;
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
  --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px;
  --shadow-card: 0 1px 2px rgba(17,17,17,.04), 0 0 0 1px var(--border);
}

/* Dark mode */
[data-theme="dark"] {
  --bg: #0B0B0B; --surface: #141414; --surface-2: #1C1C1C; --border: #262626;
  --text: #F5F5F4; --text-muted: #A3A3A3; --text-subtle: #737373;
  --brand-strong: #F22915; --brand-hover: #FF4632; --brand-soft: #2A0F0B;
  --chart-2: #F5F5F4; --down: #A1A1AA;
}

/* Usage rules
   - Primary CTA: pill, --brand-strong fill, white 600-weight text. One per screen.
   - Secondary: pill, transparent, 1px --border, --text.
   - KPI numbers: --font-display, --fs-kpi, tabular-nums.
   - Pro-locked cards (AI visibility, spike note, rankings, competitors): blurred sample + "Upgrade to Pro" pill.
*/