@layer lf-tokens {
/*
  LeadFlows design tokens.
  This file is the new source for shared visual decisions. Legacy files still
  define overlapping variables during the migration; keep values compatible.
*/
:root,
:root[data-theme-mode="light"] {
  color-scheme: light;

  --lf-color-bg: #f7f9fc;
  --lf-color-bg-flat: #ffffff;
  --lf-color-surface: #ffffff;
  --lf-color-surface-muted: #f8fafc;
  --lf-color-surface-raised: #ffffff;
  --lf-color-text: #0f172a;
  --lf-color-text-soft: #334155;
  --lf-color-muted: #64748b;
  --lf-color-border: rgba(15, 23, 42, 0.08);
  --lf-color-border-strong: rgba(15, 23, 42, 0.14);
  --lf-color-primary: var(--primary-color, #2563eb);
  --lf-color-primary-soft: var(--primary-light, rgba(37, 99, 235, 0.12));
  --lf-color-primary-strong: #1d4ed8;
  --lf-color-primary-subtle: #dbeafe;
  --lf-color-secondary: #7c3aed;
  --lf-color-on-primary: #ffffff;
  --lf-color-success: #22c55e;
  --lf-color-success-strong: #16a34a;
  --lf-color-warning: #f59e0b;
  --lf-color-danger: #ef4444;
  --lf-color-info: #0ea5e9;
  --lf-color-muted-light: #94a3b8;
  --lf-color-border-solid: #e2e8f0;
  --lf-focus-ring: 0 0 0 2px var(--lf-color-surface), 0 0 0 5px var(--lf-color-primary-strong);
  --lf-target-min: 24px;
  --lf-target-comfortable: 44px;

  /* Fixed palette primitives keep literal colors stable across tenant themes. */
  --lf-palette-white: #ffffff;
  --lf-palette-slate-600: #475569;
  --lf-palette-indigo-600: #4f46e5;
  --lf-palette-neutral-400: #aaaaaa;
  --lf-palette-border-muted: #dbe3ee;
  --lf-palette-violet-700: #6d28d9;
  --lf-palette-green-700: #15803d;
  --lf-palette-orange-500: #f97316;
  --lf-palette-red-600: #dc2626;
  --lf-palette-amber-600: #d97706;
  --lf-palette-red-700: #b91c1c;
  --lf-palette-amber-500: #f59e0b;
  --lf-palette-blue-50: #eff6ff;
  --lf-palette-red-500: #ef4444;
  --lf-palette-violet-500: #8b5cf6;
  --lf-palette-slate-custom: #52617d;
  --lf-palette-neutral-900: #181818;
  --lf-palette-amber-700: #b45309;
  --lf-palette-blue-300: #93c5fd;
  --lf-palette-blue-500: #3b82f6;
  --lf-palette-ink-deep: #070b2d;
  --lf-palette-amber-800: #92400e;
  --lf-palette-violet-bright: #6d4aff;
  --lf-palette-blue-600: #2563eb;
  --lf-palette-neutral-850: #222222;
  --lf-palette-ink-navy: #172044;
  --lf-palette-green-800: #166534;
  --lf-palette-gray-900: #111827;
  --lf-palette-surface-blue: #eef4fb;
  --lf-palette-orange-600: #ea580c;
  --lf-palette-danger-deep: #b42318;
  --lf-palette-slate-legacy: #718096;
  --lf-palette-blue-400: #60a5fa;
  --lf-palette-green-400: #4ade80;

  /* RGB channels allow opacity variants to share one palette decision. */
  --lf-rgb-white: 255, 255, 255;
  --lf-rgb-black: 0, 0, 0;
  --lf-rgb-text: 15, 23, 42;
  --lf-rgb-primary: 37, 99, 235;
  --lf-rgb-secondary: 124, 58, 237;
  --lf-rgb-muted: 148, 163, 184;
  --lf-rgb-border: 226, 232, 240;
  --lf-rgb-surface-muted: 248, 250, 252;
  --lf-rgb-success: 34, 197, 94;
  --lf-rgb-success-strong: 22, 163, 74;
  --lf-rgb-warning: 245, 158, 11;
  --lf-rgb-danger: 239, 68, 68;

  --lf-font-sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --lf-font-size-xs: 11px;
  --lf-font-size-sm: 12px;
  --lf-font-size-md: 14px;
  --lf-font-size-lg: 16px;
  --lf-font-size-xl: 20px;
  --lf-font-size-display: 34px;
  --lf-line-tight: 1.15;
  --lf-line-normal: 1.45;
  --lf-font-weight-300: 300;
  --lf-font-weight-400: 400;
  --lf-font-weight-450: 450;
  --lf-font-weight-500: 500;
  --lf-font-weight-520: 520;
  --lf-font-weight-550: 550;
  --lf-font-weight-560: 560;
  --lf-font-weight-600: 600;
  --lf-font-weight-620: 620;
  --lf-font-weight-650: 650;
  --lf-font-weight-680: 680;
  --lf-font-weight-700: 700;
  --lf-font-weight-720: 720;
  --lf-font-weight-750: 750;
  --lf-font-weight-760: 760;
  --lf-font-weight-780: 780;
  --lf-font-weight-800: 800;
  --lf-font-weight-820: 820;
  --lf-font-weight-850: 850;
  --lf-font-weight-900: 900;
  --lf-font-weight-950: 950;
  --lf-font-weight-body: var(--lf-font-weight-400);
  --lf-font-weight-medium: var(--lf-font-weight-500);
  --lf-font-weight-semibold: var(--lf-font-weight-600);
  --lf-font-weight-bold: var(--lf-font-weight-700);
  --lf-font-weight-extrabold: var(--lf-font-weight-800);
  --lf-font-weight-black: var(--lf-font-weight-900);

  --lf-space-1: 4px;
  --lf-space-2: 8px;
  --lf-space-3: 12px;
  --lf-space-4: 16px;
  --lf-space-5: 20px;
  --lf-space-6: 24px;
  --lf-space-8: 32px;

  --lf-radius-2xs: 4px;
  --lf-radius-compact: 5px;
  --lf-radius-xs: 6px;
  --lf-radius-sm: 8px;
  --lf-radius-control: 10px;
  --lf-radius-md: 12px;
  --lf-radius-card-sm: 14px;
  --lf-radius-lg: 16px;
  --lf-radius-card-lg: 18px;
  --lf-radius-xl: 20px;
  --lf-radius-2xl: 24px;
  --lf-radius-3xl: 28px;
  --lf-radius-4xl: 30px;
  --lf-radius-round: 50%;
  --lf-radius-pill: 999px;

  --lf-shadow-soft: 0 12px 28px rgba(15, 23, 42, 0.08);
  --lf-shadow-lift: 0 18px 44px rgba(15, 23, 42, 0.1);
  --lf-shadow-card-hover: 0 16px 34px rgba(15, 23, 42, 0.09);

  --lf-sidebar-width: 220px;
  --lf-sidebar-width-collapsed: 68px;
  --lf-page-max: 1440px;
  --lf-topbar-height: 64px;
  --lf-transition-fast: 160ms ease;
}

/* Legacy compatibility aliases. Remove only after the old CSS is retired. */
:root,
:root[data-theme-mode="light"] {
  --font-main: var(--lf-font-sans);
  --sidebar-width: var(--lf-sidebar-width);
  --sidebar-width-collapsed: var(--lf-sidebar-width-collapsed);
  --topbar-height: var(--lf-topbar-height);
  --radius-sm: var(--lf-radius-sm);
  --radius-md: var(--lf-radius-md);
  --radius-lg: var(--lf-radius-lg);
  --primary: var(--primary-color, #2563eb);
  --secondary: var(--accent-depth, #8b5cf6);
  --primary-soft: var(--primary-light, rgba(37, 99, 235, 0.14));
  --bg-main: var(--lf-color-bg-flat);
  --sidebar-color: var(--lf-color-surface);
  --card-color: var(--lf-color-surface);
  --bg: var(--lf-color-bg-flat);
  --bg-2: var(--lf-color-bg-flat);
  --bg-3: var(--lf-color-bg-flat);
  --surface: var(--lf-color-surface);
  --surface-elevated: var(--lf-color-surface-raised);
  --ink: var(--lf-color-text);
  --muted: var(--lf-color-muted);
  --stroke: var(--lf-color-border);
  --stroke-strong: var(--lf-color-border-strong);
  --soft: rgba(15, 23, 42, 0.04);
  --shadow: var(--lf-shadow-lift);
  --shadow-soft: var(--lf-shadow-soft);
  --shadow-soft-main: var(--lf-shadow-soft);
  --radius-card: var(--lf-radius-lg);
  --radius-shell: var(--lf-radius-xl);
  --surface-main: var(--lf-color-surface);
  --surface-soft: var(--lf-color-surface-raised);
  --text-main: var(--lf-color-text);
  --text-muted: var(--lf-color-muted);
  --border-main: var(--lf-color-border);
  --brand-primary: var(--primary, var(--primary-color, #2563eb));
  --brand-primary-soft: var(--primary-soft, var(--primary-light, #e8f0ff));
  --brand-secondary: var(--secondary, var(--accent-depth, #8b5cf6));
}
}