/**
 * Do not edit directly, this file was auto-generated.
 */

:root {
  --font-family-display: 'Inter', system-ui, sans-serif; /** Headlines, stat figures, wordmark. Single-family system (Inter) — replaces the former Space Grotesk display face. */
  --font-family-body: 'Inter', system-ui, sans-serif; /** Body copy, UI labels. Single-family system (Inter) — replaces the former Manrope body face. */
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-size-display: 32px;
  --font-size-headline: 24px;
  --font-size-title: 18px;
  --font-size-body: 14px;
  --font-size-label: 12px;
  --font-size-caption: 11px;
  --font-line-height-tight: 1.2;
  --font-line-height-normal: 1.5;
  --font-line-height-relaxed: 1.55;
  --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;
  --radius-sm: 8px;
  --radius-md: 10px;
  --radius-lg: 12px;
  --radius-xl: 18px;
  --radius-xxl: 24px;
  --radius-full: 999px;
  --color-brand-blue: #0A5CF5; /** Primary accent — buttons, active nav, links. Sampled from the RankFixer.ai logo wordmark. */
  --color-brand-blue-bright: #00AAFF; /** Gradient partner for brand.blue — sampled from the logo's chart-bar highlight. */
  --color-brand-blue-light: #3B82F6; /** Lightened brand.blue for text/icons on dark surfaces. */
  --color-brand-blue-hover: #60A5FA; /** Hover state for brand.blue-light. */
  --color-brand-orange: #FF7900; /** AI-specific accent only — sampled from the logo's target/AI mark. Not a general-purpose accent. */
  --color-brand-orange-light: #FF9142; /** Lightened brand.orange for text/icons on dark surfaces. */
  --color-brand-amber: #FD9F09; /** Secondary AI/warm accent — sampled from the logo's target-ring gradient. Also reused as the warning semantic color. */
  --color-brand-amber-light: #FFB43D; /** Lightened brand.amber for text/icons on dark surfaces. */
  --color-brand-purple: #7C3AED; /** Tailwind violet-600 — sampled from the Figma source for the Dashboard AI-mention icon badge/bar. Theme-invariant fill, matching how brand.blue/orange/amber stay constant across themes. */
  --color-brand-purple-light: #A78BFA; /** Text/icon variant of brand.purple for DARK surfaces — lightened from the base #7C3AED for WCAG AA contrast against navy, same reasoning as blue-light/orange-light/amber-light. */
  --color-platform-google-blue: #4285F4; /** Google's real logo blue, sampled from the raw Figma color export (2026-09-02) — confirmed against Google's own public 4-color mark. Theme-invariant, like brand.blue/orange/amber/purple: a third-party platform's own brand color doesn't change with our theme. Doubles as the single-swatch Google color for plain bars/badges (e.g. Dashboard AI Mentions' google_ai_overview row) — use platform.google-blue/red/yellow/green together only when rendering the full multi-color 'G' mark icon. */
  --color-platform-google-red: #EA4335; /** Google logo red — one quarter of the full 'G' mark, for icon use alongside google-blue/yellow/green. Theme-invariant. */
  --color-platform-google-yellow: #FBBC05; /** Google logo yellow — one quarter of the full 'G' mark, for icon use alongside google-blue/red/green. Theme-invariant. */
  --color-platform-google-green: #34A853; /** Google logo green — one quarter of the full 'G' mark, for icon use alongside google-blue/red/yellow. Theme-invariant. */
  --color-platform-facebook: #1877F2; /** Facebook's real brand blue, sampled from the raw Figma color export (2026-09-02) — confirmed against Facebook's own brand color. Theme-invariant; reserved for the future Social Media module's platform icon/badge fills. */
  --color-platform-linkedin: #0077B5; /** LinkedIn's real brand blue, sampled from the raw Figma color export (2026-09-02) — confirmed against LinkedIn's own brand color. Theme-invariant; reserved for the future Social Media module's platform icon/badge fills. */
  --color-platform-instagram: #E1306C; /** Instagram's real brand pink — the anchor swatch of Instagram's signature purple-to-orange gradient wordmark, sampled from the raw Figma color export (2026-09-02) as a single-color stand-in for that gradient. Theme-invariant; reserved for the future Social Media module's platform icon/badge fills. */
  --color-platform-claude: #D97757; /** Anthropic's real Claude terracotta brand color, sampled from the raw Figma color export (2026-09-02) — confirmed against Anthropic's own brand color. Theme-invariant; not currently wired into the AI Mentions card (no 'claude' platform value exists in AI_MENTION_PLATFORMS/VALID_PLATFORMS today), reserved for if/when that changes and for the future Social Media module. */
  --color-background-base: #0A0E1E; /** App background — deep navy, dark-mode default. */
  --color-background-elevated: rgba(255, 255, 255, 0.055); /** Glass panel fill. */
  --color-background-elevated-strong: rgba(255, 255, 255, 0.07); /** Glass panel fill for emphasized surfaces (e.g. auth card). */
  --color-background-solid: #10152A; /** Opaque (non-glass) raised-surface fill for floating elements over arbitrary page content — toasts, autocomplete/dropdown popovers — where translucent glass would let content behind it bleed through and hurt contrast. */
  --color-border-glass: rgba(255, 255, 255, 0.1);
  --color-border-glass-strong: rgba(255, 255, 255, 0.14);
  --color-text-primary: #F5F7FF;
  --color-text-muted: #8A93B8;
  --color-text-faint: #5B6489;
  --color-text-on-accent: #0A0E1E; /** Text color for use on top of a bright accent fill (buttons). */
  --color-semantic-success: #22C55E;
  --color-semantic-error: #EF4444; /** Backgrounds/borders/graphical strokes only — use error-light for text (WCAG AA contrast on dark surfaces). */
  --color-semantic-error-light: #FF6B6B; /** Text color for error state — lightened from semantic.error to meet 4.5:1 contrast on dark glass surfaces (found via axe-core audit, Phase 0 QA pass). */
  --elevation-glass-shadow: 0 24px 60px rgba(0, 0, 0, 0.4);
  --elevation-glass-inset: inset 0 1px 0 rgba(255, 255, 255, 0.22);
  --elevation-button-glow-blue: 0 8px 28px rgba(10, 92, 245, 0.35);
  --elevation-button-glow-amber: 0 8px 28px rgba(253, 159, 9, 0.35);
  --blur-sm: 16px;
  --blur-md: 20px;
  --blur-lg: 24px;
  --blur-xl: 28px;
  --color-semantic-warning: var(--color-brand-amber);
  --surface-blur-sm: blur(var(--blur-sm)) saturate(140%); /** Dark theme (liquid glass): the modal-overlay scrim's blur maps to this tier. */
  --surface-blur-md: blur(var(--blur-md)) saturate(140%); /** Dark theme: .rf-glass panels. */
  --surface-blur-lg: blur(var(--blur-lg)) saturate(140%); /** Dark theme: sidebar, cards, insight card. */
  --surface-blur-xl: blur(var(--blur-xl)) saturate(150%); /** Dark theme: modal dialog. */
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --font-family-display: 'Inter', system-ui, sans-serif; /** Headlines, stat figures, wordmark. Single-family system (Inter) — replaces the former Space Grotesk display face. */
    --font-family-body: 'Inter', system-ui, sans-serif; /** Body copy, UI labels. Single-family system (Inter) — replaces the former Manrope body face. */
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-size-display: 32px;
    --font-size-headline: 24px;
    --font-size-title: 18px;
    --font-size-body: 14px;
    --font-size-label: 12px;
    --font-size-caption: 11px;
    --font-line-height-tight: 1.2;
    --font-line-height-normal: 1.5;
    --font-line-height-relaxed: 1.55;
    --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;
    --radius-sm: 8px;
    --radius-md: 10px;
    --radius-lg: 12px;
    --radius-xl: 18px;
    --radius-xxl: 24px;
    --radius-full: 999px;
    --color-brand-blue: #0A5CF5; /** Primary accent — unchanged across themes; sampled from the RankFixer.ai logo wordmark. Used mainly as a fill (buttons, active states), not as small text, so it doesn't need a light-theme contrast adjustment. */
    --color-brand-blue-bright: #00AAFF; /** Gradient partner for brand.blue — unchanged across themes. */
    --color-brand-blue-light: #1D4ED8; /** Text/icon variant of brand.blue for LIGHT surfaces — darkened from the dark-theme value (#3B82F6) for WCAG AA contrast against white/near-white backgrounds. The dark-theme value was lightened for the opposite reason (contrast on navy); light theme needs the opposite move. */
    --color-brand-blue-hover: #2563EB; /** Hover state for brand.blue-light on light surfaces (link hover). */
    --color-brand-orange: #FF7900; /** AI-specific accent only — unchanged across themes. */
    --color-brand-orange-light: #C2570A; /** Text/icon variant of brand.orange for light surfaces — darkened for AA contrast on white, same reasoning as blue-light. */
    --color-brand-amber: #FD9F09; /** Secondary AI/warm accent — unchanged across themes. Also aliased as the warning semantic color. */
    --color-brand-amber-light: #8A5A04; /** Text/icon variant of brand.amber for light surfaces — darkened for AA contrast on white, same reasoning as blue-light. */
    --color-brand-purple: #7C3AED; /** Tailwind violet-600 — unchanged across themes; sampled from the Figma source for the Dashboard AI-mention icon badge/bar. */
    --color-brand-purple-light: #6D28D9; /** Text/icon variant of brand.purple for LIGHT surfaces — darkened from the dark-theme value (#A78BFA) for WCAG AA contrast against white/near-white backgrounds. The dark-theme value was lightened for the opposite reason (contrast on navy); light theme needs the opposite move, same reasoning as blue-light. */
    --color-platform-google-blue: #4285F4; /** Google's real logo blue — unchanged across themes, same reasoning as brand.blue/orange/amber/purple: a third-party platform's own brand color doesn't change with our theme. Doubles as the single-swatch Google color for plain bars/badges (e.g. Dashboard AI Mentions' google_ai_overview row) — use platform.google-blue/red/yellow/green together only when rendering the full multi-color 'G' mark icon. */
    --color-platform-google-red: #EA4335; /** Google logo red — unchanged across themes; one quarter of the full 'G' mark, for icon use alongside google-blue/yellow/green. */
    --color-platform-google-yellow: #FBBC05; /** Google logo yellow — unchanged across themes; one quarter of the full 'G' mark, for icon use alongside google-blue/red/green. */
    --color-platform-google-green: #34A853; /** Google logo green — unchanged across themes; one quarter of the full 'G' mark, for icon use alongside google-blue/red/yellow. */
    --color-platform-facebook: #1877F2; /** Facebook's real brand blue — unchanged across themes; reserved for the future Social Media module's platform icon/badge fills. */
    --color-platform-linkedin: #0077B5; /** LinkedIn's real brand blue — unchanged across themes; reserved for the future Social Media module's platform icon/badge fills. */
    --color-platform-instagram: #E1306C; /** Instagram's real brand pink — unchanged across themes; the anchor swatch of Instagram's signature purple-to-orange gradient wordmark, used as a single-color stand-in for that gradient. Reserved for the future Social Media module's platform icon/badge fills. */
    --color-platform-claude: #D97757; /** Anthropic's real Claude terracotta brand color — unchanged across themes. Not currently wired into the AI Mentions card (no 'claude' platform value exists in AI_MENTION_PLATFORMS/VALID_PLATFORMS today), reserved for if/when that changes and for the future Social Media module. */
    --color-background-base: #F4F6FB; /** App background — light mode: soft neutral off-white (not pure #FFFFFF) so opaque elevated white cards still read as visibly raised without relying on shadow alone. */
    --color-background-elevated: #FFFFFF; /** Solid opaque white card fill — deliberately NOT a translucent/rgba value like the dark theme's glass fill: blur is off in light mode (surface-blur.* = none), so translucency here would just let the page background bleed through unsoftened and look muddy. */
    --color-background-elevated-strong: #FFFFFF; /** Same solid white as elevated — in light mode, emphasis for 'strong' surfaces (e.g. the auth card) comes from border-glass-strong + elevation.glass-shadow, not a deeper fill. */
    --color-background-solid: #FFFFFF; /** Opaque raised-surface fill for toasts/popovers over arbitrary page content. */
    --color-border-glass: rgba(16, 21, 42, 0.10); /** Token path kept as 'glass' for parity with the dark theme even though light-mode cards aren't glass — this is just a subtle neutral card border, navy-tinted rather than pure gray to stay warm with the rest of the palette. */
    --color-border-glass-strong: rgba(16, 21, 42, 0.16);
    --color-text-primary: #10152A; /** Near-black navy — the inverse role of the dark theme's background.base color. */
    --color-text-muted: #5B6478;
    --color-text-faint: #8A93A6;
    --color-text-on-accent: #0A0E1E; /** Unchanged across themes — accent buttons (blue/amber gradients) keep the same bright saturated fills regardless of theme, so dark text on top of them stays correct either way. */
    --color-semantic-success: #15803D; /** Deeper green than the dark theme's #22C55E — used directly as text color (e.g. badges, stat deltas) on pale tinted backgrounds close to white, so it needs to be dark enough on its own for AA contrast. */
    --color-semantic-error: #DC2626; /** Deeper red than the dark theme's #EF4444 — used for backgrounds/borders/graphical strokes (see error-light for text), consistent with the darker overall palette light mode needs for contrast on white. */
    --color-semantic-error-light: #B91C1C; /** Text color for error state on light surfaces — despite the name (kept for token-path parity with the dark theme), this is DARKER than semantic.error here: the dark theme lightened error text for contrast on navy; light theme needs the opposite move for contrast on white. */
    --elevation-glass-shadow: 0 1px 2px rgba(16, 21, 42, 0.06), 0 8px 24px rgba(16, 21, 42, 0.08); /** Light theme: solid cards have no glass to catch light, so the dark theme's heavy black drop shadow (tuned for a navy background) is replaced by a soft, subtle neutral-navy-tinted shadow — the modern flat-card treatment. */
    --elevation-glass-inset: none; /** The dark theme's inset highlight simulates a glass edge catching light — meaningless without glass, so it's dropped entirely (not just weakened) in light theme. */
    --elevation-button-glow-blue: 0 8px 28px rgba(10, 92, 245, 0.28); /** Slightly softened vs. dark theme's 0.35 alpha — a saturated glow reads more harshly against a light background. */
    --elevation-button-glow-amber: 0 8px 28px rgba(253, 159, 9, 0.28); /** Slightly softened vs. dark theme's 0.35 alpha, same reasoning as button-glow-blue. */
    --blur-sm: 16px;
    --blur-md: 20px;
    --blur-lg: 24px;
    --blur-xl: 28px;
    --surface-blur-sm: none; /** Blur-as-a-toggle: OFF in light theme. Backdrop blur over a translucent white-on-white fill looks muddy, not clean — light-theme surfaces are solid/opaque instead, so no blur is needed or wanted. */
    --surface-blur-md: none;
    --surface-blur-lg: none;
    --surface-blur-xl: none;
    --color-semantic-warning: var(--color-brand-amber);
  }
}

:root[data-theme="light"] {
  --font-family-display: 'Inter', system-ui, sans-serif; /** Headlines, stat figures, wordmark. Single-family system (Inter) — replaces the former Space Grotesk display face. */
  --font-family-body: 'Inter', system-ui, sans-serif; /** Body copy, UI labels. Single-family system (Inter) — replaces the former Manrope body face. */
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-size-display: 32px;
  --font-size-headline: 24px;
  --font-size-title: 18px;
  --font-size-body: 14px;
  --font-size-label: 12px;
  --font-size-caption: 11px;
  --font-line-height-tight: 1.2;
  --font-line-height-normal: 1.5;
  --font-line-height-relaxed: 1.55;
  --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;
  --radius-sm: 8px;
  --radius-md: 10px;
  --radius-lg: 12px;
  --radius-xl: 18px;
  --radius-xxl: 24px;
  --radius-full: 999px;
  --color-brand-blue: #0A5CF5; /** Primary accent — unchanged across themes; sampled from the RankFixer.ai logo wordmark. Used mainly as a fill (buttons, active states), not as small text, so it doesn't need a light-theme contrast adjustment. */
  --color-brand-blue-bright: #00AAFF; /** Gradient partner for brand.blue — unchanged across themes. */
  --color-brand-blue-light: #1D4ED8; /** Text/icon variant of brand.blue for LIGHT surfaces — darkened from the dark-theme value (#3B82F6) for WCAG AA contrast against white/near-white backgrounds. The dark-theme value was lightened for the opposite reason (contrast on navy); light theme needs the opposite move. */
  --color-brand-blue-hover: #2563EB; /** Hover state for brand.blue-light on light surfaces (link hover). */
  --color-brand-orange: #FF7900; /** AI-specific accent only — unchanged across themes. */
  --color-brand-orange-light: #C2570A; /** Text/icon variant of brand.orange for light surfaces — darkened for AA contrast on white, same reasoning as blue-light. */
  --color-brand-amber: #FD9F09; /** Secondary AI/warm accent — unchanged across themes. Also aliased as the warning semantic color. */
  --color-brand-amber-light: #8A5A04; /** Text/icon variant of brand.amber for light surfaces — darkened for AA contrast on white, same reasoning as blue-light. */
  --color-brand-purple: #7C3AED; /** Tailwind violet-600 — unchanged across themes; sampled from the Figma source for the Dashboard AI-mention icon badge/bar. */
  --color-brand-purple-light: #6D28D9; /** Text/icon variant of brand.purple for LIGHT surfaces — darkened from the dark-theme value (#A78BFA) for WCAG AA contrast against white/near-white backgrounds. The dark-theme value was lightened for the opposite reason (contrast on navy); light theme needs the opposite move, same reasoning as blue-light. */
  --color-platform-google-blue: #4285F4; /** Google's real logo blue — unchanged across themes, same reasoning as brand.blue/orange/amber/purple: a third-party platform's own brand color doesn't change with our theme. Doubles as the single-swatch Google color for plain bars/badges (e.g. Dashboard AI Mentions' google_ai_overview row) — use platform.google-blue/red/yellow/green together only when rendering the full multi-color 'G' mark icon. */
  --color-platform-google-red: #EA4335; /** Google logo red — unchanged across themes; one quarter of the full 'G' mark, for icon use alongside google-blue/yellow/green. */
  --color-platform-google-yellow: #FBBC05; /** Google logo yellow — unchanged across themes; one quarter of the full 'G' mark, for icon use alongside google-blue/red/green. */
  --color-platform-google-green: #34A853; /** Google logo green — unchanged across themes; one quarter of the full 'G' mark, for icon use alongside google-blue/red/yellow. */
  --color-platform-facebook: #1877F2; /** Facebook's real brand blue — unchanged across themes; reserved for the future Social Media module's platform icon/badge fills. */
  --color-platform-linkedin: #0077B5; /** LinkedIn's real brand blue — unchanged across themes; reserved for the future Social Media module's platform icon/badge fills. */
  --color-platform-instagram: #E1306C; /** Instagram's real brand pink — unchanged across themes; the anchor swatch of Instagram's signature purple-to-orange gradient wordmark, used as a single-color stand-in for that gradient. Reserved for the future Social Media module's platform icon/badge fills. */
  --color-platform-claude: #D97757; /** Anthropic's real Claude terracotta brand color — unchanged across themes. Not currently wired into the AI Mentions card (no 'claude' platform value exists in AI_MENTION_PLATFORMS/VALID_PLATFORMS today), reserved for if/when that changes and for the future Social Media module. */
  --color-background-base: #F4F6FB; /** App background — light mode: soft neutral off-white (not pure #FFFFFF) so opaque elevated white cards still read as visibly raised without relying on shadow alone. */
  --color-background-elevated: #FFFFFF; /** Solid opaque white card fill — deliberately NOT a translucent/rgba value like the dark theme's glass fill: blur is off in light mode (surface-blur.* = none), so translucency here would just let the page background bleed through unsoftened and look muddy. */
  --color-background-elevated-strong: #FFFFFF; /** Same solid white as elevated — in light mode, emphasis for 'strong' surfaces (e.g. the auth card) comes from border-glass-strong + elevation.glass-shadow, not a deeper fill. */
  --color-background-solid: #FFFFFF; /** Opaque raised-surface fill for toasts/popovers over arbitrary page content. */
  --color-border-glass: rgba(16, 21, 42, 0.10); /** Token path kept as 'glass' for parity with the dark theme even though light-mode cards aren't glass — this is just a subtle neutral card border, navy-tinted rather than pure gray to stay warm with the rest of the palette. */
  --color-border-glass-strong: rgba(16, 21, 42, 0.16);
  --color-text-primary: #10152A; /** Near-black navy — the inverse role of the dark theme's background.base color. */
  --color-text-muted: #5B6478;
  --color-text-faint: #8A93A6;
  --color-text-on-accent: #0A0E1E; /** Unchanged across themes — accent buttons (blue/amber gradients) keep the same bright saturated fills regardless of theme, so dark text on top of them stays correct either way. */
  --color-semantic-success: #15803D; /** Deeper green than the dark theme's #22C55E — used directly as text color (e.g. badges, stat deltas) on pale tinted backgrounds close to white, so it needs to be dark enough on its own for AA contrast. */
  --color-semantic-error: #DC2626; /** Deeper red than the dark theme's #EF4444 — used for backgrounds/borders/graphical strokes (see error-light for text), consistent with the darker overall palette light mode needs for contrast on white. */
  --color-semantic-error-light: #B91C1C; /** Text color for error state on light surfaces — despite the name (kept for token-path parity with the dark theme), this is DARKER than semantic.error here: the dark theme lightened error text for contrast on navy; light theme needs the opposite move for contrast on white. */
  --elevation-glass-shadow: 0 1px 2px rgba(16, 21, 42, 0.06), 0 8px 24px rgba(16, 21, 42, 0.08); /** Light theme: solid cards have no glass to catch light, so the dark theme's heavy black drop shadow (tuned for a navy background) is replaced by a soft, subtle neutral-navy-tinted shadow — the modern flat-card treatment. */
  --elevation-glass-inset: none; /** The dark theme's inset highlight simulates a glass edge catching light — meaningless without glass, so it's dropped entirely (not just weakened) in light theme. */
  --elevation-button-glow-blue: 0 8px 28px rgba(10, 92, 245, 0.28); /** Slightly softened vs. dark theme's 0.35 alpha — a saturated glow reads more harshly against a light background. */
  --elevation-button-glow-amber: 0 8px 28px rgba(253, 159, 9, 0.28); /** Slightly softened vs. dark theme's 0.35 alpha, same reasoning as button-glow-blue. */
  --blur-sm: 16px;
  --blur-md: 20px;
  --blur-lg: 24px;
  --blur-xl: 28px;
  --surface-blur-sm: none; /** Blur-as-a-toggle: OFF in light theme. Backdrop blur over a translucent white-on-white fill looks muddy, not clean — light-theme surfaces are solid/opaque instead, so no blur is needed or wanted. */
  --surface-blur-md: none;
  --surface-blur-lg: none;
  --surface-blur-xl: none;
  --color-semantic-warning: var(--color-brand-amber);
}

:root[data-theme="dark"] {
  --font-family-display: 'Inter', system-ui, sans-serif; /** Headlines, stat figures, wordmark. Single-family system (Inter) — replaces the former Space Grotesk display face. */
  --font-family-body: 'Inter', system-ui, sans-serif; /** Body copy, UI labels. Single-family system (Inter) — replaces the former Manrope body face. */
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-size-display: 32px;
  --font-size-headline: 24px;
  --font-size-title: 18px;
  --font-size-body: 14px;
  --font-size-label: 12px;
  --font-size-caption: 11px;
  --font-line-height-tight: 1.2;
  --font-line-height-normal: 1.5;
  --font-line-height-relaxed: 1.55;
  --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;
  --radius-sm: 8px;
  --radius-md: 10px;
  --radius-lg: 12px;
  --radius-xl: 18px;
  --radius-xxl: 24px;
  --radius-full: 999px;
  --color-brand-blue: #0A5CF5; /** Primary accent — buttons, active nav, links. Sampled from the RankFixer.ai logo wordmark. */
  --color-brand-blue-bright: #00AAFF; /** Gradient partner for brand.blue — sampled from the logo's chart-bar highlight. */
  --color-brand-blue-light: #3B82F6; /** Lightened brand.blue for text/icons on dark surfaces. */
  --color-brand-blue-hover: #60A5FA; /** Hover state for brand.blue-light. */
  --color-brand-orange: #FF7900; /** AI-specific accent only — sampled from the logo's target/AI mark. Not a general-purpose accent. */
  --color-brand-orange-light: #FF9142; /** Lightened brand.orange for text/icons on dark surfaces. */
  --color-brand-amber: #FD9F09; /** Secondary AI/warm accent — sampled from the logo's target-ring gradient. Also reused as the warning semantic color. */
  --color-brand-amber-light: #FFB43D; /** Lightened brand.amber for text/icons on dark surfaces. */
  --color-brand-purple: #7C3AED; /** Tailwind violet-600 — sampled from the Figma source for the Dashboard AI-mention icon badge/bar. Theme-invariant fill, matching how brand.blue/orange/amber stay constant across themes. */
  --color-brand-purple-light: #A78BFA; /** Text/icon variant of brand.purple for DARK surfaces — lightened from the base #7C3AED for WCAG AA contrast against navy, same reasoning as blue-light/orange-light/amber-light. */
  --color-platform-google-blue: #4285F4; /** Google's real logo blue, sampled from the raw Figma color export (2026-09-02) — confirmed against Google's own public 4-color mark. Theme-invariant, like brand.blue/orange/amber/purple: a third-party platform's own brand color doesn't change with our theme. Doubles as the single-swatch Google color for plain bars/badges (e.g. Dashboard AI Mentions' google_ai_overview row) — use platform.google-blue/red/yellow/green together only when rendering the full multi-color 'G' mark icon. */
  --color-platform-google-red: #EA4335; /** Google logo red — one quarter of the full 'G' mark, for icon use alongside google-blue/yellow/green. Theme-invariant. */
  --color-platform-google-yellow: #FBBC05; /** Google logo yellow — one quarter of the full 'G' mark, for icon use alongside google-blue/red/green. Theme-invariant. */
  --color-platform-google-green: #34A853; /** Google logo green — one quarter of the full 'G' mark, for icon use alongside google-blue/red/yellow. Theme-invariant. */
  --color-platform-facebook: #1877F2; /** Facebook's real brand blue, sampled from the raw Figma color export (2026-09-02) — confirmed against Facebook's own brand color. Theme-invariant; reserved for the future Social Media module's platform icon/badge fills. */
  --color-platform-linkedin: #0077B5; /** LinkedIn's real brand blue, sampled from the raw Figma color export (2026-09-02) — confirmed against LinkedIn's own brand color. Theme-invariant; reserved for the future Social Media module's platform icon/badge fills. */
  --color-platform-instagram: #E1306C; /** Instagram's real brand pink — the anchor swatch of Instagram's signature purple-to-orange gradient wordmark, sampled from the raw Figma color export (2026-09-02) as a single-color stand-in for that gradient. Theme-invariant; reserved for the future Social Media module's platform icon/badge fills. */
  --color-platform-claude: #D97757; /** Anthropic's real Claude terracotta brand color, sampled from the raw Figma color export (2026-09-02) — confirmed against Anthropic's own brand color. Theme-invariant; not currently wired into the AI Mentions card (no 'claude' platform value exists in AI_MENTION_PLATFORMS/VALID_PLATFORMS today), reserved for if/when that changes and for the future Social Media module. */
  --color-background-base: #0A0E1E; /** App background — deep navy, dark-mode default. */
  --color-background-elevated: rgba(255, 255, 255, 0.055); /** Glass panel fill. */
  --color-background-elevated-strong: rgba(255, 255, 255, 0.07); /** Glass panel fill for emphasized surfaces (e.g. auth card). */
  --color-background-solid: #10152A; /** Opaque (non-glass) raised-surface fill for floating elements over arbitrary page content — toasts, autocomplete/dropdown popovers — where translucent glass would let content behind it bleed through and hurt contrast. */
  --color-border-glass: rgba(255, 255, 255, 0.1);
  --color-border-glass-strong: rgba(255, 255, 255, 0.14);
  --color-text-primary: #F5F7FF;
  --color-text-muted: #8A93B8;
  --color-text-faint: #5B6489;
  --color-text-on-accent: #0A0E1E; /** Text color for use on top of a bright accent fill (buttons). */
  --color-semantic-success: #22C55E;
  --color-semantic-error: #EF4444; /** Backgrounds/borders/graphical strokes only — use error-light for text (WCAG AA contrast on dark surfaces). */
  --color-semantic-error-light: #FF6B6B; /** Text color for error state — lightened from semantic.error to meet 4.5:1 contrast on dark glass surfaces (found via axe-core audit, Phase 0 QA pass). */
  --elevation-glass-shadow: 0 24px 60px rgba(0, 0, 0, 0.4);
  --elevation-glass-inset: inset 0 1px 0 rgba(255, 255, 255, 0.22);
  --elevation-button-glow-blue: 0 8px 28px rgba(10, 92, 245, 0.35);
  --elevation-button-glow-amber: 0 8px 28px rgba(253, 159, 9, 0.35);
  --blur-sm: 16px;
  --blur-md: 20px;
  --blur-lg: 24px;
  --blur-xl: 28px;
  --color-semantic-warning: var(--color-brand-amber);
  --surface-blur-sm: blur(var(--blur-sm)) saturate(140%); /** Dark theme (liquid glass): the modal-overlay scrim's blur maps to this tier. */
  --surface-blur-md: blur(var(--blur-md)) saturate(140%); /** Dark theme: .rf-glass panels. */
  --surface-blur-lg: blur(var(--blur-lg)) saturate(140%); /** Dark theme: sidebar, cards, insight card. */
  --surface-blur-xl: blur(var(--blur-xl)) saturate(150%); /** Dark theme: modal dialog. */
}