/* GENERATED by scripts/sync-tokens.sh from brand-system/src/tokens.css. Do not edit.
   Change tokens in the brand-system repo, then re-run the script. */
/*
 * @adpulse/brand-system — tokens.css
 * "Cyber-Grid": Vercel/Geist precision on a blueprint grid, with red, violet and blue signal.
 *
 * Three layers:
 *   1. Primitives  --ap-{ramp}-{step}   private, theme-invariant. Never use them in an app.
 *   2. Semantics   shadcn contract names (--background, --primary, …) + --ap-{role} for AdPulse roles.
 *   3. Tailwind    @theme inline maps semantics to utilities (bg-primary, bg-action, text-info …).
 *
 * The 60-30-10 budget:
 *   60%  Ink        violet-tinted neutrals — surfaces, text, borders
 *   30%  Violet     structure — navigation, menus, selection, focus, the default primary button
 *   10%  Red        action — publish/launch/upgrade CTAs, conversion, errors, fraud, live
 *        Blue       information — links, info, data series, the AI assistant (outside the budget,
 *                   like emerald/amber status)
 *
 * Dark mode is a `.dark` class on <html>. Every dark value is chosen per step, not inverted.
 * Primitives are generated: edit scripts/palette.mjs, then `node scripts/palette.mjs --write`.
 */

/* ── 1. Primitives ─────────────────────────────────────────────────────────── */
:root {
  /* @generated primitives:start */
  --ap-white: #ffffff;
  --ap-black: #000000;
  --ap-logo-red: #ff0000;
  --ap-logo-ink: #333333;
  /* ink · oklch hue 286 */
  --ap-ink-50: #fafafc;
  --ap-ink-100: #f4f4f7;
  --ap-ink-200: #e7e7ed;
  --ap-ink-300: #d3d3dc;
  --ap-ink-400: #a3a3ae;
  --ap-ink-500: #797986;
  --ap-ink-600: #5f5f6d;
  --ap-ink-700: #41414f;
  --ap-ink-800: #282735;
  --ap-ink-850: #1b1a27;
  --ap-ink-900: #11101c;
  --ap-ink-950: #080811;
  /* violet · oklch hue 293 */
  --ap-violet-50: #f6f4ff;
  --ap-violet-100: #edeaff;
  --ap-violet-200: #ddd6ff;
  --ap-violet-300: #c5b6ff;
  --ap-violet-400: #a88cff;
  --ap-violet-500: #9261ff;
  --ap-violet-600: #7e37f2;
  --ap-violet-700: #6924d0;
  --ap-violet-800: #501aa2;
  --ap-violet-850: #401583;
  --ap-violet-900: #311266;
  --ap-violet-950: #1d0a40;
  /* blue · oklch hue 257 */
  --ap-blue-50: #f0f6ff;
  --ap-blue-100: #e2eeff;
  --ap-blue-200: #c7deff;
  --ap-blue-300: #9fc7ff;
  --ap-blue-400: #65a6ff;
  --ap-blue-500: #2a87ff;
  --ap-blue-600: #006de3;
  --ap-blue-700: #005abd;
  --ap-blue-800: #004594;
  --ap-blue-850: #003779;
  --ap-blue-900: #002b62;
  --ap-blue-950: #001a40;
  /* red · oklch hue 27 */
  --ap-red-50: #fff3f1;
  --ap-red-100: #ffe5e1;
  --ap-red-200: #ffcbc4;
  --ap-red-300: #ffa096;
  --ap-red-400: #ff6f63;
  --ap-red-500: #fd2229;
  --ap-red-600: #dd0118;
  --ap-red-700: #b90414;
  --ap-red-800: #920a11;
  --ap-red-850: #770b0e;
  --ap-red-900: #5c0e0d;
  --ap-red-950: #3c0807;
  /* cyan · oklch hue 212 */
  --ap-cyan-50: #e8fbff;
  --ap-cyan-100: #d1f6fe;
  --ap-cyan-200: #a5eefd;
  --ap-cyan-300: #68def4;
  --ap-cyan-400: #00cae6;
  --ap-cyan-500: #00b2ca;
  --ap-cyan-600: #0093a8;
  --ap-cyan-700: #007687;
  --ap-cyan-800: #005a68;
  --ap-cyan-850: #004853;
  --ap-cyan-900: #003740;
  --ap-cyan-950: #00242b;
  /* magenta · oklch hue 342 */
  --ap-magenta-50: #fff1f9;
  --ap-magenta-100: #ffe2f3;
  --ap-magenta-200: #ffc8e9;
  --ap-magenta-300: #ff9edb;
  --ap-magenta-400: #f86cca;
  --ap-magenta-500: #e541b5;
  --ap-magenta-600: #c82a9c;
  --ap-magenta-700: #a61e81;
  --ap-magenta-800: #821865;
  --ap-magenta-850: #6a1552;
  --ap-magenta-900: #52113f;
  --ap-magenta-950: #350a28;
  /* emerald · oklch hue 158 */
  --ap-emerald-50: #ecfbf2;
  --ap-emerald-100: #d6f8e3;
  --ap-emerald-200: #b0f1ca;
  --ap-emerald-300: #7ae4aa;
  --ap-emerald-400: #3cd18b;
  --ap-emerald-500: #09b874;
  --ap-emerald-600: #02985f;
  --ap-emerald-700: #0e794c;
  --ap-emerald-800: #165e3c;
  --ap-emerald-850: #134b30;
  --ap-emerald-900: #0f3924;
  --ap-emerald-950: #092617;
  /* amber · oklch hue 72 */
  --ap-amber-50: #fff7ee;
  --ap-amber-100: #ffefdc;
  --ap-amber-200: #ffe1bd;
  --ap-amber-300: #ffcc8b;
  --ap-amber-400: #ffb346;
  --ap-amber-500: #f4a000;
  --ap-amber-600: #ca8400;
  --ap-amber-700: #9f6700;
  --ap-amber-800: #784e08;
  --ap-amber-850: #623f0a;
  --ap-amber-900: #4c320a;
  --ap-amber-950: #331f04;
  /* @generated primitives:end */

  /* Chart slots — validated with the dataviz validator (docs/charts.md). Hex is committed on purpose:
     re-run the validator before changing any of them. Order is fixed: blue, magenta, violet, amber, cyan. */
  --ap-chart-light-1: #2e89ff;
  --ap-chart-light-2: #b5008c;
  --ap-chart-light-3: #9f7cff;
  --ap-chart-light-4: #be7c00;
  --ap-chart-light-5: #009db3;
  --ap-chart-dark-1: #2e89ff;
  --ap-chart-dark-2: #c51799;
  --ap-chart-dark-3: #9569ff;
  --ap-chart-dark-4: #c68100;
  --ap-chart-dark-5: #00a4bb;
}

/* ── 2. Semantics · light ──────────────────────────────────────────────────── */
:root {
  color-scheme: light;

  /* 60% — surfaces and ink. The page is engineering paper; cards are white sheets on it. */
  --background: var(--ap-ink-50);
  --foreground: var(--ap-ink-950);
  --card: var(--ap-white);
  --card-foreground: var(--ap-ink-950);
  --popover: var(--ap-white);
  --popover-foreground: var(--ap-ink-950);
  --muted: var(--ap-ink-100);
  --muted-foreground: var(--ap-ink-600);
  --secondary: var(--ap-ink-100);
  --secondary-foreground: var(--ap-ink-900);
  --border: var(--ap-ink-200);
  --input: var(--ap-ink-500);

  /* 30% — Electric Violet structure */
  --primary: var(--ap-violet-600);
  --primary-foreground: var(--ap-white);
  --ap-primary-hover: var(--ap-violet-700);   /* both themes: white text holds 7.6:1 */
  --accent: var(--ap-violet-50);
  --accent-foreground: var(--ap-violet-800);
  --ring: var(--ap-violet-500);

  /* 10% — Pulse Red */
  --destructive: var(--ap-red-600);
  --destructive-foreground: var(--ap-white);

  /* Charts (shadcn contract) */
  --chart-1: var(--ap-chart-light-1);
  --chart-2: var(--ap-chart-light-2);
  --chart-3: var(--ap-chart-light-3);
  --chart-4: var(--ap-chart-light-4);
  --chart-5: var(--ap-chart-light-5);

  /* Sidebar — the dashboard's structural rail */
  --sidebar: var(--ap-white);
  --sidebar-foreground: var(--ap-ink-800);
  --sidebar-primary: var(--ap-violet-600);
  --sidebar-primary-foreground: var(--ap-white);
  --sidebar-accent: var(--ap-violet-50);
  --sidebar-accent-foreground: var(--ap-violet-800);
  --sidebar-border: var(--ap-ink-200);
  --sidebar-ring: var(--ap-violet-500);

  /* AdPulse roles */
  --ap-action: var(--ap-red-600);              /* publish, launch, upgrade — one per view */
  --ap-action-hover: var(--ap-red-700);
  --ap-action-foreground: var(--ap-white);
  --ap-action-subtle: var(--ap-red-50);
  --ap-action-subtle-foreground: var(--ap-red-800);
  --ap-live: var(--ap-red-500);                 /* live dot, recording, real-time */
  --ap-conversion: var(--ap-red-500);           /* the conversion series in charts */

  --ap-structure: var(--ap-violet-700);         /* violet as text: active nav label, selected tab */
  --ap-structure-subtle: var(--ap-violet-50);
  --ap-structure-border: var(--ap-violet-200);

  --ap-info: var(--ap-blue-600);                /* links, info text, data emphasis */
  --ap-info-subtle: var(--ap-blue-50);
  --ap-info-foreground: var(--ap-blue-800);
  --ap-info-border: var(--ap-blue-200);
  --ap-ai: var(--ap-blue-600);                  /* the assistant: avatar, sparkle, thinking state */
  --ap-ai-subtle: var(--ap-blue-50);
  --ap-ai-foreground: var(--ap-blue-800);
  --ap-ai-border: var(--ap-blue-200);

  --ap-success: var(--ap-emerald-700);
  --ap-success-subtle: var(--ap-emerald-50);
  --ap-success-foreground: var(--ap-emerald-800);
  --ap-success-border: var(--ap-emerald-200);
  --ap-warning: var(--ap-amber-700);
  --ap-warning-subtle: var(--ap-amber-50);
  --ap-warning-foreground: var(--ap-amber-800);
  --ap-warning-border: var(--ap-amber-200);
  --ap-danger-subtle: var(--ap-red-50);
  --ap-danger-foreground: var(--ap-red-800);
  --ap-danger-border: var(--ap-red-200);

  /* Modal scrim — dark in both themes */
  --ap-overlay: #0808118c;

  /* Stage — a ground that stays dark in both themes: ad creatives, dark slides, hero bands */
  --ap-stage: var(--ap-ink-950);
  --ap-stage-raised: var(--ap-ink-850);
  --ap-stage-foreground: var(--ap-ink-50);
  --ap-stage-muted: var(--ap-ink-400);
  --ap-stage-grid: #c5b6ff12;

  /* Logo inks — the wordmark's exact colours */
  --ap-logo-ink-current: var(--ap-logo-ink);
  --ap-logo-dot: var(--ap-logo-red);

  /* Blueprint — barely there. You feel it before you see it. */
  --ap-grid-line: #1b1a270f;         /* ink-850 @ 6% */
  --ap-grid-line-major: #1b1a271a;   /* ink-850 @ 10%, every 4th line */
  --ap-grid-dot: #1b1a2724;          /* ink-850 @ 14% */
  --ap-grid-accent: #7e37f229;       /* violet-600 @ 16%, a highlighted cell or axis */
  --ap-frame: var(--ap-ink-300);     /* dashed frames and registration ticks */

  /* Glow — in light mode it is only a soft ring; the neon lives in dark mode */
  --ap-glow-violet: 0 0 0 3px #9261ff2e;
  --ap-glow-blue: 0 0 0 3px #2a87ff2e;
  --ap-glow-red: 0 0 0 3px #fd22292e;

  /* Elevation — hairline-first, shadows stay small */
  --ap-shadow-xs: 0 1px 2px #0808110d;
  --ap-shadow-sm: 0 1px 2px #0808110f, 0 1px 3px #08081114;
  --ap-shadow-md: 0 4px 12px #08081114, 0 2px 4px #0808110f;
  --ap-shadow-lg: 0 16px 40px #0808111f, 0 4px 10px #08081114;
}

/* ── 3. Non-colour tokens (theme-invariant) ────────────────────────────────── */
:root {
  /* Type. Geist Sans for UI, Geist Mono for every number, Inter for long-form papers, DM Sans for the logo only. */
  --ap-font-sans: "Geist", "Geist Variable", "Geist Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --ap-font-mono: "Geist Mono", "Geist Mono Variable", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --ap-font-body: "Inter", "Inter Variable", var(--ap-font-sans);
  --ap-font-logo: "DM Sans", var(--ap-font-sans);

  --ap-text-2xs: 0.6875rem;  /* 11 — mono eyebrow labels */
  --ap-text-xs: 0.75rem;     /* 12 */
  --ap-text-sm: 0.8125rem;   /* 13 — dashboard default */
  --ap-text-base: 0.875rem;  /* 14 — UI body */
  --ap-text-md: 1rem;        /* 16 — marketing body */
  --ap-text-lg: 1.125rem;    /* 18 */
  --ap-text-xl: 1.25rem;     /* 20 */
  --ap-text-2xl: 1.5rem;     /* 24 */
  --ap-text-3xl: 1.875rem;   /* 30 */
  --ap-text-4xl: 2.25rem;    /* 36 */
  --ap-text-5xl: 3rem;       /* 48 */
  --ap-text-6xl: 3.75rem;    /* 60 */
  --ap-text-7xl: 4.5rem;     /* 72 */

  --ap-tracking-display: -0.03em;  /* ≥ 32px headings */
  --ap-tracking-tight: -0.015em;   /* 20–30px */
  --ap-tracking-label: 0.05em;     /* uppercase mono labels */

  /* Spacing — one 8px unit, 4px half-step. Everything on the grid. */
  --ap-unit: 8px;
  --ap-space-0-5: 4px;
  --ap-space-1: 8px;
  --ap-space-1-5: 12px;
  --ap-space-2: 16px;
  --ap-space-3: 24px;
  --ap-space-4: 32px;
  --ap-space-5: 40px;
  --ap-space-6: 48px;
  --ap-space-8: 64px;
  --ap-space-10: 80px;
  --ap-space-12: 96px;
  --ap-space-16: 128px;

  /* Blueprint geometry — one pitch per surface, never mixed */
  --ap-grid-size: 32px;      /* line grid cell = 4 units */
  --ap-grid-dot-size: 16px;  /* dot matrix pitch = 2 units */
  --ap-grid-fine: 8px;       /* plot areas only */

  /* Radius — crisp, on the 8px grid */
  --radius: 0.5rem;
  --ap-radius-xs: 2px;
  --ap-radius-sm: 4px;
  --ap-radius-md: 6px;
  --ap-radius-lg: 8px;
  --ap-radius-xl: 12px;
  --ap-radius-2xl: 16px;
  --ap-radius-full: 9999px;

  /* Layers */
  --ap-z-base: 0;
  --ap-z-sticky: 10;
  --ap-z-dropdown: 40;
  --ap-z-overlay: 50;
  --ap-z-modal: 60;
  --ap-z-toast: 70;
  --ap-z-tooltip: 80;

  /* Motion — functional, fast, never decorative */
  --ap-duration-instant: 80ms;
  --ap-duration-fast: 140ms;
  --ap-duration-base: 200ms;
  --ap-duration-slow: 320ms;
  --ap-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ap-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ap-ease-linear: linear;
}

/* ── 4. Semantics · dark ───────────────────────────────────────────────────── */
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;

    /* 60% — deep violet-black */
    --background: var(--ap-ink-950);
    --foreground: var(--ap-ink-50);
    --card: var(--ap-ink-900);
    --card-foreground: var(--ap-ink-50);
    --popover: var(--ap-ink-850);
    --popover-foreground: var(--ap-ink-50);
    --muted: var(--ap-ink-850);
    --muted-foreground: var(--ap-ink-400);
    --secondary: var(--ap-ink-850);
    --secondary-foreground: var(--ap-ink-100);
    --border: var(--ap-ink-800);
    --input: var(--ap-ink-600);

    /* 30% — the violet stays electric; white text on it in both themes */
    --primary: var(--ap-violet-600);
    --primary-foreground: var(--ap-white);
    --accent: var(--ap-violet-950);
    --accent-foreground: var(--ap-violet-200);
    --ring: var(--ap-violet-400);

    /* 10% — lighter red so it reads as text on dark; dark ink on it as a fill */
    --destructive: var(--ap-red-500);
    --destructive-foreground: var(--ap-ink-950);

    --chart-1: var(--ap-chart-dark-1);
    --chart-2: var(--ap-chart-dark-2);
    --chart-3: var(--ap-chart-dark-3);
    --chart-4: var(--ap-chart-dark-4);
    --chart-5: var(--ap-chart-dark-5);

    --sidebar: var(--ap-ink-900);
    --sidebar-foreground: var(--ap-ink-200);
    --sidebar-primary: var(--ap-violet-600);
    --sidebar-primary-foreground: var(--ap-white);
    --sidebar-accent: var(--ap-violet-950);
    --sidebar-accent-foreground: var(--ap-violet-200);
    --sidebar-border: var(--ap-ink-800);
    --sidebar-ring: var(--ap-violet-400);

    --ap-action: var(--ap-red-600);
    --ap-action-hover: var(--ap-red-700);  /* hover darkens + gains --ap-glow-red */
    --ap-action-foreground: var(--ap-white);
    --ap-action-subtle: var(--ap-red-950);
    --ap-action-subtle-foreground: var(--ap-red-200);
    --ap-live: var(--ap-red-500);
    --ap-conversion: var(--ap-red-400);

    --ap-structure: var(--ap-violet-300);
    --ap-structure-subtle: var(--ap-violet-950);
    --ap-structure-border: var(--ap-violet-800);

    --ap-info: var(--ap-blue-400);
    --ap-info-subtle: var(--ap-blue-950);
    --ap-info-foreground: var(--ap-blue-200);
    --ap-info-border: var(--ap-blue-800);
    --ap-ai: var(--ap-blue-400);
    --ap-ai-subtle: var(--ap-blue-950);
    --ap-ai-foreground: var(--ap-blue-200);
    --ap-ai-border: var(--ap-blue-800);

    --ap-success: var(--ap-emerald-400);
    --ap-success-subtle: var(--ap-emerald-950);
    --ap-success-foreground: var(--ap-emerald-200);
    --ap-success-border: var(--ap-emerald-800);
    --ap-warning: var(--ap-amber-400);
    --ap-warning-subtle: var(--ap-amber-950);
    --ap-warning-foreground: var(--ap-amber-200);
    --ap-warning-border: var(--ap-amber-800);
    --ap-danger-subtle: var(--ap-red-950);
    --ap-danger-foreground: var(--ap-red-200);
    --ap-danger-border: var(--ap-red-800);

    --ap-logo-ink-current: var(--ap-white);

    /* Modal scrim — dark in both themes */
    --ap-overlay: #080811b3;

    /* Blueprint on dark — violet-tinted lines: the grid is lit, not printed */
    --ap-grid-line: #c5b6ff12;         /* violet-300 @ 7% */
    --ap-grid-line-major: #c5b6ff1f;   /* violet-300 @ 12% */
    --ap-grid-dot: #c5b6ff29;          /* violet-300 @ 16% */
    --ap-grid-accent: #9261ff40;       /* violet-500 @ 25% */
    --ap-frame: var(--ap-ink-700);

    /* Neon — 1px core + soft bloom. Focus, live, the active rail, hero accents. Never on text. */
    --ap-glow-violet: 0 0 0 1px #a88cff80, 0 0 20px #9261ff8c;
    --ap-glow-blue: 0 0 0 1px #65a6ff80, 0 0 20px #2a87ff8c;
    --ap-glow-red: 0 0 0 1px #ff6f6380, 0 0 20px #fd22298c;

    --ap-shadow-xs: 0 1px 2px #00000066;
    --ap-shadow-sm: inset 0 1px 0 #ffffff0a, 0 1px 3px #00000080;
    --ap-shadow-md: inset 0 1px 0 #ffffff0d, 0 6px 16px #00000099;
    --ap-shadow-lg: inset 0 1px 0 #ffffff0f, 0 20px 48px #000000b3;
  }
}

/* ── 5. Reduced motion ─────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  :root {
    --ap-duration-instant: 0ms;
    --ap-duration-fast: 0ms;
    --ap-duration-base: 0ms;
    --ap-duration-slow: 0ms;
  }
}