/*
 * Self-contained design tokens for the standalone Lead Caravan site.
 *
 * These values are vendored from the repo design system
 * (design_system/base/tokens/*). They are intentionally inlined rather than
 * @import-ed across the repo: this directory is the entire nginx web root, so a
 * cross-repo @import (e.g. ../../design_system/...) escapes the served root and
 * 404s in production, leaving every custom property undefined. Keeping the
 * primitives here makes the site truly standalone and correctly styled.
 *
 * If the source primitives change, re-sync the small subset used below.
 *
 * Last synced: 2026-06-16. Primitive spacing/radius/typography values still
 * mirror design_system/tokens/CSS, while the Lead auth bridge below maps this
 * standalone site onto the App Shell auth palette: black/red by default with an
 * explicit white/blue light-mode override.
 */

:root {
  color-scheme: dark;

  /* --- Primitives: color --- */
  --color-white: #ffffff;
  --color-black: #000000;
  --color-slate-50: #f8fafc;
  --color-slate-100: #f1f5f9;
  --color-slate-300: #cbd5e1;
  --color-slate-400: #94a3b8;
  --color-slate-700: #334155;
  --color-slate-900: #0f172a;
  --color-slate-950: #020617;
  --color-gray-950: #030712;
  --color-blue-50: #eff6ff;
  --color-blue-100: #dbeafe;
  --color-blue-300: #93c5fd;
  --color-blue-400: #60a5fa;
  --color-blue-500: #2b7fff;
  --color-blue-600: #2563eb;
  --color-blue-700: #1d4ed8;
  --color-blue-950: #172554;
  --color-cyan-300: #67e8f9;
  --color-cyan-600: #0891b2;
  --color-teal-300: #5eead4;
  --color-teal-400: #2dd4bf;
  --color-teal-500: #14b8a6;
  --color-teal-950: #042f2e;
  --color-amber-200: #fde68a;
  --color-amber-400: #fbbf24;
  --color-amber-500: #f59e0b;
  --color-red-400: #f87171;
  --color-red-500: #e50914;
  --color-red-600: #b20710;
  --color-red-300: #ff3b44;
  --color-green-400: #4ade80;

  /* --- Auth-page palette bridge --- */
  --lead-auth-light-background: var(--color-white);
  --lead-auth-light-page-start: var(--color-white);
  --lead-auth-light-surface: var(--color-white);
  --lead-auth-light-surface-soft: color-mix(in srgb, var(--color-blue-50) 76%, var(--color-white));
  --lead-auth-light-surface-raised: color-mix(in srgb, var(--color-blue-50) 88%, var(--color-white));
  --lead-auth-light-field-surface: color-mix(in srgb, var(--color-blue-50) 68%, var(--color-white));
  --lead-auth-light-foreground: #161827;
  --lead-auth-light-muted: #697089;
  --lead-auth-light-border: rgb(76 86 120 / 0.16);
  --lead-auth-light-primary: var(--color-blue-600);
  --lead-auth-light-primary-strong: var(--color-blue-700);
  --lead-auth-light-primary-foreground: var(--color-white);
  --lead-auth-light-primary-soft: color-mix(in srgb, var(--lead-auth-light-primary) 10%, transparent);
  --lead-auth-light-primary-soft-strong: color-mix(in srgb, var(--lead-auth-light-primary) 18%, transparent);
  --lead-auth-light-shadow: rgb(37 99 235 / 0.14);
  --lead-auth-light-danger: var(--color-red-500);
  --lead-auth-light-success: #16a34a;

  --lead-auth-dark-background: #09090b;
  --lead-auth-dark-page-start: var(--color-black);
  --lead-auth-dark-surface: #141417;
  --lead-auth-dark-surface-soft: #1d1f25;
  --lead-auth-dark-surface-raised: #18181c;
  --lead-auth-dark-field-surface: #111216;
  --lead-auth-dark-foreground: oklch(0.985 0 0);
  --lead-auth-dark-muted: #9aa3b2;
  --lead-auth-dark-border: rgb(255 255 255 / 0.10);
  --lead-auth-dark-primary: var(--color-red-500);
  --lead-auth-dark-primary-strong: var(--color-red-300);
  --lead-auth-dark-primary-active: var(--color-red-600);
  --lead-auth-dark-primary-foreground: var(--color-white);
  --lead-auth-dark-primary-soft: rgb(229 9 20 / 0.10);
  --lead-auth-dark-primary-soft-strong: rgb(229 9 20 / 0.18);
  --lead-auth-dark-shadow: rgb(0 0 0 / 0.34);
  --lead-auth-dark-danger: var(--color-red-400);
  --lead-auth-dark-success: var(--color-green-400);

  --lead-auth-background: var(--lead-auth-dark-background);
  --lead-auth-page-start: var(--lead-auth-dark-page-start);
  --lead-auth-surface: var(--lead-auth-dark-surface);
  --lead-auth-surface-soft: var(--lead-auth-dark-surface-soft);
  --lead-auth-surface-raised: var(--lead-auth-dark-surface-raised);
  --lead-auth-field-surface: var(--lead-auth-dark-field-surface);
  --lead-auth-foreground: var(--lead-auth-dark-foreground);
  --lead-auth-muted: var(--lead-auth-dark-muted);
  --lead-auth-border: var(--lead-auth-dark-border);
  --lead-auth-primary: var(--lead-auth-dark-primary);
  --lead-auth-primary-strong: var(--lead-auth-dark-primary-strong);
  --lead-auth-primary-foreground: var(--lead-auth-dark-primary-foreground);
  --lead-auth-primary-soft: var(--lead-auth-dark-primary-soft);
  --lead-auth-primary-soft-strong: var(--lead-auth-dark-primary-soft-strong);
  --lead-auth-shadow: var(--lead-auth-dark-shadow);
  --lead-auth-danger: var(--lead-auth-dark-danger);
  --lead-auth-success: var(--lead-auth-dark-success);

  /* --- Primitives: spacing --- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;

  /* --- Primitives: radius --- */
  --corner-radius-md: 0.375rem;
  --corner-radius-lg: 0.5rem;
  --corner-radius-pill: 9999px;

  /* --- Primitives: typography --- */
  --typography-font-family-sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --typography-font-size-xs: 0.75rem;
  --typography-font-size-rem-082: 0.82rem;
  --typography-font-size-sm: 0.875rem;
  --typography-font-size-base: 1rem;
  --typography-font-size-xl: 1.25rem;
  --typography-font-size-display-sm: 3rem;
  --typography-line-height-base: 1.5;
  --typography-line-height-extra-relaxed: 1.75;
  --typography-font-weight-medium: 500;
  --typography-font-weight-semibold: 600;
  --typography-font-weight-bold: 700;

  /* --- Project mappings (from design-system-project-sheet) --- */
  --project-font-sans: var(--typography-font-family-sans);
  --project-text: var(--lead-auth-foreground);
  --project-text-muted: var(--lead-auth-muted);
  --project-surface-base: var(--lead-auth-background);
  --project-surface-page-start: var(--lead-auth-page-start);
  --project-surface-elevated: var(--lead-auth-surface-raised);
  --project-surface-card: var(--lead-auth-surface-soft);
  --project-surface-card-strong: var(--lead-auth-surface);
  --project-border: var(--lead-auth-border);
  --project-shadow-color: var(--lead-auth-shadow);
  --project-shadow-card: 0 var(--space-5) var(--space-12) var(--project-shadow-color);

  --project-action: var(--lead-auth-primary);
  --project-action-strong: var(--lead-auth-primary-strong);
  --project-action-text: var(--lead-auth-primary-foreground);
  --project-accent-info: var(--lead-auth-primary);
  --project-accent-warning: var(--lead-auth-primary-strong);

  --project-glow-action: color-mix(in srgb, var(--project-action) 16%, transparent);
  --project-glow-info: color-mix(in srgb, var(--project-accent-info) 16%, transparent);
  --project-soft-action: color-mix(in srgb, var(--project-action) 12%, transparent);
  --project-soft-info: color-mix(in srgb, var(--project-accent-info) 8%, transparent);
  --project-soft-info-hover: color-mix(in srgb, var(--project-accent-info) 16%, transparent);

  --project-radius-card: var(--corner-radius-lg);
  --project-radius-pill: var(--corner-radius-pill);
  --project-radius-bar: var(--corner-radius-md);
  --project-layout-max: 75rem;
  --project-panel-min: 20rem;
  --project-layout-gutter: var(--space-8);
  --project-layout-gutter-mobile: var(--space-6);
  --project-section-gap: var(--space-5);
  --project-hero-gap: 1.75rem;
  --project-hero-padding: 3.5rem;
  --project-section-padding: var(--space-10);
  --project-button-height: var(--space-12);
  --project-button-padding-x: 1.125rem;
  --project-pill-padding-x: 0.625rem;
  --project-mobile-padding: var(--space-6);
  --project-visually-hidden-size: 0.0625rem;

  --project-type-eyebrow: var(--typography-font-size-rem-082);
  --project-type-metric: var(--typography-font-size-display-sm);
  --project-type-body-line: var(--typography-line-height-extra-relaxed);
  --project-weight-strong: var(--typography-font-weight-bold);

  /* --- Lead Caravan site mappings --- */
  --lead-site-bg: var(--project-surface-base);
  --lead-site-bg-elevated: var(--project-surface-elevated);
  --lead-site-panel: var(--project-surface-card-strong);
  --lead-site-border: var(--project-border);
  --lead-site-text: var(--project-text);
  --lead-site-muted: var(--project-text-muted);
  --lead-site-teal: var(--project-action);
  --lead-site-teal-strong: var(--project-action-strong);
  --lead-site-blue: var(--project-accent-info);
  --lead-site-amber: var(--project-accent-warning);
  --lead-site-bg-start: var(--project-surface-page-start);
  --lead-site-glow-teal: var(--project-glow-action);
  --lead-site-glow-blue: var(--project-glow-info);
  --lead-site-shadow: var(--project-shadow-color);
  --lead-site-primary-text: var(--project-action-text);
  --lead-site-secondary-surface: var(--project-soft-info);
  --lead-site-secondary-surface-hover: var(--project-soft-info-hover);
  --lead-site-card-gradient-start: var(--project-surface-card-strong);
  --lead-site-card-gradient-end: var(--project-surface-elevated);
  --lead-site-card-surface: var(--project-surface-card);
  --lead-site-card-transition-fast: 180ms;
  --lead-site-card-transition-medium: 520ms;
  --lead-site-card-hover-lift: -0.125rem;
  --lead-site-card-sheen-overrun: -12%;
  --lead-site-card-sheen-width: 124%;
  --lead-site-card-sheen-start-x: -110%;
  --lead-site-card-sheen-end-x: 110%;
  --lead-site-card-sheen-skew: -14deg;
  --lead-site-tag-surface: var(--project-soft-action);
  --lead-site-bar-teal-start: var(--lead-auth-primary-soft-strong);
  --lead-site-bar-cyan-start: var(--lead-auth-primary-soft);
  --lead-site-bar-cyan-end: var(--lead-auth-primary);
  --lead-site-bar-blue-start: var(--lead-auth-primary-soft-strong);
  --lead-site-bar-blue-end: var(--lead-auth-primary-strong);
  --lead-site-bar-amber-start: var(--lead-auth-primary-soft);
  --lead-site-bar-amber-end: var(--lead-auth-primary-strong);

  /* --- Form / status colors --- */
  --lead-site-danger: var(--lead-auth-danger);
  --lead-site-success: var(--lead-auth-success);
  --lead-site-field-surface: var(--lead-auth-field-surface);
  --lead-site-visually-hidden-size: var(--project-visually-hidden-size);
  --lead-site-mask-opaque: var(--lead-auth-background);

  /* --- Iconography (mirrors the frontend Card/Button icon conventions) --- */
  --lead-site-icon-surface: var(--project-soft-action);
  --lead-site-icon-border: color-mix(in srgb, var(--project-action) 24%, transparent);
  --lead-site-icon-text: var(--project-action);
  --lead-site-ring: var(--project-glow-action);
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --lead-auth-background: var(--lead-auth-dark-background);
    --lead-auth-page-start: var(--lead-auth-dark-page-start);
    --lead-auth-surface: var(--lead-auth-dark-surface);
    --lead-auth-surface-soft: var(--lead-auth-dark-surface-soft);
    --lead-auth-surface-raised: var(--lead-auth-dark-surface-raised);
    --lead-auth-field-surface: var(--lead-auth-dark-field-surface);
    --lead-auth-foreground: var(--lead-auth-dark-foreground);
    --lead-auth-muted: var(--lead-auth-dark-muted);
    --lead-auth-border: var(--lead-auth-dark-border);
    --lead-auth-primary: var(--lead-auth-dark-primary);
    --lead-auth-primary-strong: var(--lead-auth-dark-primary-strong);
    --lead-auth-primary-foreground: var(--lead-auth-dark-primary-foreground);
    --lead-auth-primary-soft: var(--lead-auth-dark-primary-soft);
    --lead-auth-primary-soft-strong: var(--lead-auth-dark-primary-soft-strong);
    --lead-auth-shadow: var(--lead-auth-dark-shadow);
    --lead-auth-danger: var(--lead-auth-dark-danger);
    --lead-auth-success: var(--lead-auth-dark-success);
  }
}

:root.dark,
:root[data-theme="dark"] {
  color-scheme: dark;
  --lead-auth-background: var(--lead-auth-dark-background);
  --lead-auth-page-start: var(--lead-auth-dark-page-start);
  --lead-auth-surface: var(--lead-auth-dark-surface);
  --lead-auth-surface-soft: var(--lead-auth-dark-surface-soft);
  --lead-auth-surface-raised: var(--lead-auth-dark-surface-raised);
  --lead-auth-field-surface: var(--lead-auth-dark-field-surface);
  --lead-auth-foreground: var(--lead-auth-dark-foreground);
  --lead-auth-muted: var(--lead-auth-dark-muted);
  --lead-auth-border: var(--lead-auth-dark-border);
  --lead-auth-primary: var(--lead-auth-dark-primary);
  --lead-auth-primary-strong: var(--lead-auth-dark-primary-strong);
  --lead-auth-primary-foreground: var(--lead-auth-dark-primary-foreground);
  --lead-auth-primary-soft: var(--lead-auth-dark-primary-soft);
  --lead-auth-primary-soft-strong: var(--lead-auth-dark-primary-soft-strong);
  --lead-auth-shadow: var(--lead-auth-dark-shadow);
  --lead-auth-danger: var(--lead-auth-dark-danger);
  --lead-auth-success: var(--lead-auth-dark-success);

  --project-text: var(--lead-auth-dark-foreground);
  --project-text-muted: var(--lead-auth-dark-muted);
  --project-surface-base: var(--lead-auth-dark-background);
  --project-surface-page-start: var(--lead-auth-dark-page-start);
  --project-surface-elevated: var(--lead-auth-dark-surface-raised);
  --project-surface-card: var(--lead-auth-dark-surface-soft);
  --project-surface-card-strong: var(--lead-auth-dark-surface);
  --project-border: var(--lead-auth-dark-border);
  --project-shadow-color: var(--lead-auth-dark-shadow);
  --project-action: var(--lead-auth-dark-primary);
  --project-action-strong: var(--lead-auth-dark-primary-strong);
  --project-action-text: var(--lead-auth-dark-primary-foreground);
  --project-accent-info: var(--lead-auth-dark-primary);
  --project-accent-warning: var(--lead-auth-dark-primary-strong);
  --project-glow-action: color-mix(in srgb, var(--lead-auth-dark-primary) 16%, transparent);
  --project-glow-info: color-mix(in srgb, var(--lead-auth-dark-primary) 16%, transparent);
  --project-soft-action: var(--lead-auth-dark-primary-soft);
  --project-soft-info: var(--lead-auth-dark-primary-soft);
  --project-soft-info-hover: var(--lead-auth-dark-primary-soft-strong);
  --lead-site-bg: var(--lead-auth-dark-background);
  --lead-site-bg-elevated: var(--lead-auth-dark-surface-raised);
  --lead-site-panel: var(--lead-auth-dark-surface);
  --lead-site-border: var(--lead-auth-dark-border);
  --lead-site-text: var(--lead-auth-dark-foreground);
  --lead-site-muted: var(--lead-auth-dark-muted);
  --lead-site-teal: var(--lead-auth-dark-primary);
  --lead-site-teal-strong: var(--lead-auth-dark-primary-strong);
  --lead-site-blue: var(--lead-auth-dark-primary);
  --lead-site-amber: var(--lead-auth-dark-primary-strong);
  --lead-site-bg-start: var(--lead-auth-dark-page-start);
  --lead-site-glow-teal: color-mix(in srgb, var(--lead-auth-dark-primary) 16%, transparent);
  --lead-site-glow-blue: color-mix(in srgb, var(--lead-auth-dark-primary) 16%, transparent);
  --lead-site-shadow: var(--lead-auth-dark-shadow);
  --lead-site-primary-text: var(--lead-auth-dark-primary-foreground);
  --lead-site-secondary-surface: var(--lead-auth-dark-primary-soft);
  --lead-site-secondary-surface-hover: var(--lead-auth-dark-primary-soft-strong);
  --lead-site-card-gradient-start: var(--lead-auth-dark-surface);
  --lead-site-card-gradient-end: var(--lead-auth-dark-surface-raised);
  --lead-site-card-surface: var(--lead-auth-dark-surface-soft);
  --lead-site-tag-surface: var(--lead-auth-dark-primary-soft);
  --lead-site-bar-teal-start: var(--lead-auth-dark-primary-soft-strong);
  --lead-site-bar-cyan-start: var(--lead-auth-dark-primary-soft);
  --lead-site-bar-cyan-end: var(--lead-auth-dark-primary);
  --lead-site-bar-blue-start: var(--lead-auth-dark-primary-soft-strong);
  --lead-site-bar-blue-end: var(--lead-auth-dark-primary-strong);
  --lead-site-bar-amber-start: var(--lead-auth-dark-primary-soft);
  --lead-site-bar-amber-end: var(--lead-auth-dark-primary-strong);
  --lead-site-danger: var(--lead-auth-dark-danger);
  --lead-site-success: var(--lead-auth-dark-success);
  --lead-site-field-surface: var(--lead-auth-dark-field-surface);
  --lead-site-mask-opaque: var(--lead-auth-dark-background);
  --lead-site-icon-surface: var(--lead-auth-dark-primary-soft);
  --lead-site-icon-border: color-mix(in srgb, var(--lead-auth-dark-primary) 24%, transparent);
  --lead-site-icon-text: var(--lead-auth-dark-primary);
  --lead-site-ring: color-mix(in srgb, var(--lead-auth-dark-primary) 16%, transparent);
}

:root.light,
:root[data-theme="light"] {
  color-scheme: light;
  --lead-auth-background: var(--lead-auth-light-background);
  --lead-auth-page-start: var(--lead-auth-light-page-start);
  --lead-auth-surface: var(--lead-auth-light-surface);
  --lead-auth-surface-soft: var(--lead-auth-light-surface-soft);
  --lead-auth-surface-raised: var(--lead-auth-light-surface-raised);
  --lead-auth-field-surface: var(--lead-auth-light-field-surface);
  --lead-auth-foreground: var(--lead-auth-light-foreground);
  --lead-auth-muted: var(--lead-auth-light-muted);
  --lead-auth-border: var(--lead-auth-light-border);
  --lead-auth-primary: var(--lead-auth-light-primary);
  --lead-auth-primary-strong: var(--lead-auth-light-primary-strong);
  --lead-auth-primary-foreground: var(--lead-auth-light-primary-foreground);
  --lead-auth-primary-soft: var(--lead-auth-light-primary-soft);
  --lead-auth-primary-soft-strong: var(--lead-auth-light-primary-soft-strong);
  --lead-auth-shadow: var(--lead-auth-light-shadow);
  --lead-auth-danger: var(--lead-auth-light-danger);
  --lead-auth-success: var(--lead-auth-light-success);

  --project-text: var(--lead-auth-light-foreground);
  --project-text-muted: var(--lead-auth-light-muted);
  --project-surface-base: var(--lead-auth-light-background);
  --project-surface-page-start: var(--lead-auth-light-page-start);
  --project-surface-elevated: var(--lead-auth-light-surface-raised);
  --project-surface-card: var(--lead-auth-light-surface-soft);
  --project-surface-card-strong: var(--lead-auth-light-surface);
  --project-border: var(--lead-auth-light-border);
  --project-shadow-color: var(--lead-auth-light-shadow);
  --project-action: var(--lead-auth-light-primary);
  --project-action-strong: var(--lead-auth-light-primary-strong);
  --project-action-text: var(--lead-auth-light-primary-foreground);
  --project-accent-info: var(--lead-auth-light-primary);
  --project-accent-warning: var(--lead-auth-light-primary-strong);
  --project-glow-action: color-mix(in srgb, var(--lead-auth-light-primary) 16%, transparent);
  --project-glow-info: color-mix(in srgb, var(--lead-auth-light-primary) 16%, transparent);
  --project-soft-action: var(--lead-auth-light-primary-soft);
  --project-soft-info: color-mix(in srgb, var(--lead-auth-light-primary) 8%, transparent);
  --project-soft-info-hover: var(--lead-auth-light-primary-soft-strong);
  --lead-site-bg: var(--lead-auth-light-background);
  --lead-site-bg-elevated: var(--lead-auth-light-surface-raised);
  --lead-site-panel: var(--lead-auth-light-surface);
  --lead-site-border: var(--lead-auth-light-border);
  --lead-site-text: var(--lead-auth-light-foreground);
  --lead-site-muted: var(--lead-auth-light-muted);
  --lead-site-teal: var(--lead-auth-light-primary);
  --lead-site-teal-strong: var(--lead-auth-light-primary-strong);
  --lead-site-blue: var(--lead-auth-light-primary);
  --lead-site-amber: var(--lead-auth-light-primary-strong);
  --lead-site-bg-start: var(--lead-auth-light-page-start);
  --lead-site-glow-teal: color-mix(in srgb, var(--lead-auth-light-primary) 16%, transparent);
  --lead-site-glow-blue: color-mix(in srgb, var(--lead-auth-light-primary) 16%, transparent);
  --lead-site-shadow: var(--lead-auth-light-shadow);
  --lead-site-primary-text: var(--lead-auth-light-primary-foreground);
  --lead-site-secondary-surface: color-mix(in srgb, var(--lead-auth-light-primary) 8%, transparent);
  --lead-site-secondary-surface-hover: var(--lead-auth-light-primary-soft-strong);
  --lead-site-card-gradient-start: var(--lead-auth-light-surface);
  --lead-site-card-gradient-end: var(--lead-auth-light-surface-raised);
  --lead-site-card-surface: var(--lead-auth-light-surface-soft);
  --lead-site-tag-surface: var(--lead-auth-light-primary-soft);
  --lead-site-bar-teal-start: var(--lead-auth-light-primary-soft-strong);
  --lead-site-bar-cyan-start: var(--lead-auth-light-primary-soft);
  --lead-site-bar-cyan-end: var(--lead-auth-light-primary);
  --lead-site-bar-blue-start: var(--lead-auth-light-primary-soft-strong);
  --lead-site-bar-blue-end: var(--lead-auth-light-primary-strong);
  --lead-site-bar-amber-start: var(--lead-auth-light-primary-soft);
  --lead-site-bar-amber-end: var(--lead-auth-light-primary-strong);
  --lead-site-danger: var(--lead-auth-light-danger);
  --lead-site-success: var(--lead-auth-light-success);
  --lead-site-field-surface: var(--lead-auth-light-field-surface);
  --lead-site-mask-opaque: var(--lead-auth-light-background);
  --lead-site-icon-surface: var(--lead-auth-light-primary-soft);
  --lead-site-icon-border: color-mix(in srgb, var(--lead-auth-light-primary) 24%, transparent);
  --lead-site-icon-text: var(--lead-auth-light-primary);
  --lead-site-ring: color-mix(in srgb, var(--lead-auth-light-primary) 16%, transparent);
}