/*
 * Design tokens for the standalone intro page.
 *
 * GENERATED — do not hand-edit. This is the exact closure of the custom properties
 * pages/intro/ actually references, lifted from the console's theme layer:
 *   assets/css/themes/theme-base.css  (base scale + semantic tokens)
 *   assets/css/themes/purple.css      (the default EXMP palette)
 *   assets/css/themes/dark-mode.css   (the [data-exmp-mode="dark"] overrides)
 * Transitively resolved, so every var() below is satisfied inside this one file and the
 * page needs no theme-injector and no console stylesheet.
 *
 * Regenerate after pulling console token changes:
 *   python3 pages/intro/tools/gen-tokens.py
 */
:root {
  --primary-50: var(--theme-primary-50, #edf0ff);
  --primary-100: var(--theme-primary-100, #dfe3ff);
  --primary-200: var(--theme-primary-200, #c5cbff);
  --primary-300: var(--theme-primary-300, #a2a8ff);
  --primary-400: var(--theme-primary-400, #807dfc);
  --primary-500: var(--theme-primary-500, #6c5ef6);
  --primary-600: var(--theme-primary-600, #5e42eb);
  --primary-700: var(--theme-primary-700, #4f33cf);
  --primary-800: var(--theme-primary-800, #402ca7);
  --primary-950: var(--theme-primary-950, #22194d);
  --neutral-50: #f9fafb;
  --neutral-100: #f3f4f6;
  --neutral-200: #e5e7eb;
  --neutral-300: #d1d5db;
  --neutral-400: #9ca3af;
  --neutral-500: #6b7280;
  --neutral-600: #4b5563;
  --neutral-700: #374151;
  --neutral-800: #1f2937;
  --neutral-900: #111827;
  --neutral-950: #030712;
  --neutral-white: #ffffff;
  --semantic-blue-400: #698df1;
  --semantic-purple-400: #807dfc;
  --semantic-red-50: #fdf3f3;
  --semantic-red-100: #fde3e3;
  --semantic-red-300: #f8a9a9;
  --semantic-red-400: #f27777;
  --semantic-red-500: #e74c4c;
  --semantic-red-600: #d63939;
  --semantic-orange-50: #fff8ed;
  --semantic-orange-300: #ffc271;
  --semantic-orange-400: #ff9d38;
  --semantic-orange-500: #fe8011;
  --semantic-yellow-400: #ffc81b;
  --semantic-green-50: #f1fcf2;
  --semantic-cyan-100: #d3f7fa;
  --semantic-cyan-400: #34c8dc;
  --semantic-green-300: #8fe69c;
  --semantic-green-400: #57d16a;
  --semantic-green-500: #2fb344;
  --foreground-fg-primary: var(--neutral-900);
  --foreground-fg-secondary: var(--neutral-700);
  --foreground-fg-tertiary: var(--neutral-500);
  --foreground-fg-reverse: var(--neutral-white);
  --foreground-fg-brand: var(--primary-600);
  --foreground-fg-table-header: var(--neutral-500);
  --background-bg-primary: var(--neutral-50);
  --background-bg-secondary: var(--neutral-white);
  --background-bg-tertiary: var(--neutral-300);
  --background-bg-hover: var(--neutral-50);
  --background-bg-table-hover: var(--primary-50);
  --background-bg-brand-light: var(--primary-50);
  --border-border-primary: var(--neutral-200);
  --border-border-secondary: var(--neutral-100);
  --border-border-brand: var(--primary-600);
  --border-radius-radius-2xs: var(--number-3);
  --border-radius-radius-xs: var(--number-4);
  --border-radius-radius-s: var(--number-6);
  --border-radius-radius-m: var(--number-8);
  --border-radius-radius-l: var(--number-10);
  --border-radius-radius-xl: var(--number-16);
  --border-radius-radius-full: var(--number-full);
  --number-3: 3px;
  --number-4: 4px;
  --number-6: 6px;
  --number-8: 8px;
  --number-10: 10px;
  --number-16: 16px;
  --number-full: 999px;
  --badge-foreground-label-brand: var(--primary-600);
  --badge-foreground-label-danger: var(--semantic-red-500);
  --badge-foreground-label-warning: var(--semantic-orange-400);
  --badge-foreground-label-success: var(--semantic-green-500);
  --badge-foreground-label-neutral: var(--neutral-600);
  --badge-background-bg-primary: var(--primary-600);
  --badge-background-bg-primary-light: var(--primary-50);
  --badge-background-bg-neutral-light: var(--neutral-100);
  --badge-background-bg-danger-light: var(--semantic-red-50);
  --badge-background-bg-warning: var(--semantic-orange-400);
  --badge-background-bg-warning-light: var(--semantic-orange-50);
  --badge-background-bg-success-light: var(--semantic-green-50);
  --button-primary-background-bg-hover: var(--primary-400);
  --button-secondary-background-bg-hover: var(--neutral-50);
  --shadow-xs-0: 0px 1px 2px 0px #11182714;
  --neutral-black: #000000; /* LNB logo placeholder text */
  --tooltip-background-strong: rgba(31, 41, 55, 0.9); /* chart data tooltip panel (Figma 3:11369) */
  --tooltip-foreground: var(--neutral-white); /* tooltip text (light: white on the dark panel; dark mode flips it) */
  --shadow-m-0: 0px 4px 16px 0px rgba(0, 0, 0, 0.1); /* popover/overlay shadow */
  --background-overlay-light: rgba(255, 255, 255, 0.7); /* translucent white veil for sk-loading overlay mode */
  --background-overlay-scrim: rgba(31, 41, 55, 0.4); /* drawer/modal backdrop dim (dark mode darkens it) */
  --shadow-brand-lift: 0px 10px 26px 0px rgba(94, 66, 235, 0.16); /* brand-tinted lift for a focused/active panel (intro FEATURES zoom frame) */
  --shadow-console-lift: 0px 24px 60px 0px rgba(64, 44, 167, 0.16), 0px 4px 16px 0px rgba(0, 0, 0, 0.06); /* 3D-tilted console / floating card elevation (intro hero) */
  --surface-violet-band-a: #2a1b6e; /* CTA band gradient start (120deg) */
  --surface-violet-band-b: #231460; /* CTA band gradient end */
  --surface-violet-deep: #120b33; /* deepest violet — bottom stop of the intro dark surfaces (ANSWER band, footer); the top stop is --primary-950. Always dark in both themes */
  --theme-primary-50: #edf0ff;
  --theme-primary-100: #dfe3ff;
  --theme-primary-200: #c5cbff;
  --theme-primary-300: #a2a8ff;
  --theme-primary-400: #807dfc;
  --theme-primary-500: #6c5ef6;
  --theme-primary-600: #5e42eb;
  --theme-primary-700: #4f33cf;
  --theme-primary-800: #402ca7;
  --theme-primary-950: #22194d;
}

/* Dark mode — intro.js toggles [data-exmp-mode] on <html> and remembers it in localStorage. */
:root[data-exmp-mode="dark"] {
  --foreground-fg-primary: var(--neutral-100); /* headings / values (Tabler emphasis ≈ white) */
  --foreground-fg-secondary: var(--neutral-300); /* sub-labels (Tabler secondary ≈ #b3b6bd) */
  --foreground-fg-tertiary: var(--neutral-300); /* per request: tertiary text promoted to the secondary tone on dark */
  --foreground-fg-table-header: var(--neutral-white); /* table header text = white on dark (per design) */
  --foreground-fg-brand: var(--primary-300); /* OUR brand on dark (per design: lighter purple, higher contrast) */
  --neutral-black: var(--neutral-100);
  --background-bg-primary: var(--neutral-900); /* app/page backdrop (Tabler #111827) */
  --background-bg-secondary: var(--neutral-800); /* cards / panels / inputs (Tabler #1f2937) */
  --background-bg-tertiary: var(--neutral-700);
  --background-bg-hover: color-mix(in srgb, var(--neutral-700) 25%, var(--neutral-800)); /* control hover on a plain surface */
  --background-bg-table-hover: color-mix(in srgb, var(--neutral-700) 45%, var(--neutral-800)); /* table row hover */
  --background-bg-brand-light: var(--primary-950); /* dark brand tint (badges/fills) */
  --border-border-primary: var(--neutral-700);
  --border-border-secondary: var(--neutral-700);
  --background-overlay-light: rgba(17, 24, 39, 0.7);
  --background-overlay-scrim: rgba(3, 7, 18, 0.7);
  --tooltip-background-strong: var(--neutral-50);
  --tooltip-foreground: var(--neutral-900);
}