/* ============================================================
   LeadScaner Design Tokens
   Linear-style, comfortable density, light + dark
   ============================================================ */

:root {
  /* Accent — Violet (default) */
  --accent-50:  #F2EEFC;
  --accent-100: #E1D8F8;
  --accent-200: #C4B2F0;
  --accent-300: #9F84E5;
  --accent-400: #7C5DD9;
  --accent-500: #5B3FD9;
  --accent-600: #4A30B8;
  --accent-700: #3B2796;
  --accent-800: #2D1D72;
  --accent-900: #1F1450;

  /* Neutrals — warm-cool slate */
  --gray-0:   #FFFFFF;
  --gray-25:  #FCFCFD;
  --gray-50:  #F7F7F9;
  --gray-100: #EFEFF3;
  --gray-150: #E5E5EB;
  --gray-200: #D8D8E0;
  --gray-300: #B9B9C4;
  --gray-400: #8B8B98;
  --gray-500: #65656F;
  --gray-600: #44444C;
  --gray-700: #2D2D34;
  --gray-800: #1C1C20;
  --gray-900: #101013;
  --gray-950: #08080A;

  /* Semantic — light theme */
  --bg-app:        var(--gray-50);
  --bg-surface:    var(--gray-0);
  --bg-sunken:     var(--gray-100);
  --bg-hover:      var(--gray-50);
  --bg-active:     var(--gray-100);

  --border-subtle: var(--gray-150);
  --border-default:var(--gray-200);
  --border-strong: var(--gray-300);
  --border-focus:  var(--accent-500);

  --text-primary:  var(--gray-900);
  --text-secondary:var(--gray-500);
  --text-tertiary: var(--gray-400);
  --text-disabled: var(--gray-300);
  --text-inverse:  var(--gray-0);
  --text-accent:   var(--accent-600);

  --nav-bg:        var(--gray-950);
  --nav-text:      var(--gray-200);
  --nav-text-muted:var(--gray-400);
  --nav-text-active:var(--gray-0);
  --nav-border:    #1A1A20;

  /* Status */
  --success-50:  #ECFDF5;
  --success-200: #A7F3D0;
  --success-500: #10B981;
  --success-700: #047857;

  --warning-50:  #FFFBEB;
  --warning-200: #FDE68A;
  --warning-500: #F59E0B;
  --warning-700: #B45309;

  --danger-50:   #FEF2F2;
  --danger-200:  #FECACA;
  --danger-500:  #EF4444;
  --danger-700:  #B91C1C;

  --info-50:     #EFF6FF;
  --info-200:    #BFDBFE;
  --info-500:    #3B82F6;
  --info-700:    #1D4ED8;

  /* Typography */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;

  --fs-xs:   12px;
  --fs-sm:   13px;
  --fs-base: 14px;
  --fs-md:   15px;
  --fs-lg:   17px;
  --fs-xl:   20px;
  --fs-2xl:  24px;
  --fs-3xl:  30px;
  --fs-4xl:  38px;

  --lh-tight: 1.2;
  --lh-snug:  1.35;
  --lh-normal:1.5;
  --lh-relaxed:1.6;

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semibold:600;
  --fw-bold:    700;

  /* Spacing */
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 40px;
  --space-9: 48px;
  --space-10:64px;
  --space-11:80px;

  /* Radii */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 10px;
  --radius-xl: 14px;
  --radius-pill: 999px;

  /* Shadows — Linear-style, very subtle */
  --shadow-xs:  0 1px 1px rgba(16, 16, 19, 0.04);
  --shadow-sm:  0 1px 2px rgba(16, 16, 19, 0.06), 0 1px 1px rgba(16, 16, 19, 0.04);
  --shadow-md:  0 2px 4px rgba(16, 16, 19, 0.06), 0 1px 2px rgba(16, 16, 19, 0.06);
  --shadow-lg:  0 12px 24px -8px rgba(16, 16, 19, 0.10), 0 4px 8px -4px rgba(16, 16, 19, 0.06);
  --shadow-xl:  0 24px 48px -12px rgba(16, 16, 19, 0.18);
  --ring-focus: 0 0 0 3px color-mix(in oklch, var(--accent-500) 25%, transparent);

  /* Component sizing */
  --control-h-sm: 28px;
  --control-h-md: 34px;
  --control-h-lg: 40px;
  --row-h-compact: 36px;
  --row-h-comfortable: 44px;
  --row-h-roomy: 56px;

  /* Layout */
  --topnav-h: 52px;
  --sidebar-w: 240px;

  --transition-fast: 120ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base: 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Dark theme */
[data-theme="dark"] {
  --bg-app:        #0B0B0E;
  --bg-surface:    #131318;
  --bg-sunken:     #0A0A0D;
  --bg-hover:      #1A1A21;
  --bg-active:     #22222B;

  --border-subtle: #1F1F26;
  --border-default:#26262E;
  --border-strong: #34343E;

  --text-primary:  #ECECF1;
  --text-secondary:#A0A0AD;
  --text-tertiary: #6E6E7A;
  --text-disabled: #47474F;
  --text-inverse:  #0B0B0E;
  --text-accent:   #A78BFA;

  --nav-bg:        #08080A;
  --nav-text:      #B5B5C0;
  --nav-text-muted:#6E6E7A;
  --nav-text-active:#FFFFFF;
  --nav-border:    #18181E;

  --shadow-xs:  0 1px 1px rgba(0, 0, 0, 0.30);
  --shadow-sm:  0 1px 2px rgba(0, 0, 0, 0.40), 0 1px 1px rgba(0, 0, 0, 0.20);
  --shadow-md:  0 2px 4px rgba(0, 0, 0, 0.40);
  --shadow-lg:  0 12px 24px -8px rgba(0, 0, 0, 0.50);
  --shadow-xl:  0 24px 48px -12px rgba(0, 0, 0, 0.65);

  --success-50:  #052E1F;
  --success-200: #064E36;
  --success-500: #34D399;
  --success-700: #6EE7B7;
  --warning-50:  #2C1D02;
  --warning-200: #533802;
  --warning-500: #FBBF24;
  --warning-700: #FCD34D;
  --danger-50:   #2C0B0B;
  --danger-200:  #531818;
  --danger-500:  #F87171;
  --danger-700:  #FECACA;
  --info-50:     #0A1A38;
  --info-200:    #16306B;
  --info-500:    #60A5FA;
  --info-700:    #93C5FD;
}

/* Density modifiers */
[data-density="compact"] {
  --row-h: var(--row-h-compact);
  --control-h: var(--control-h-sm);
  --pad-card: 16px;
  --pad-cell-y: 8px;
  --pad-cell-x: 12px;
}
[data-density="comfortable"] {
  --row-h: var(--row-h-comfortable);
  --control-h: var(--control-h-md);
  --pad-card: 20px;
  --pad-cell-y: 12px;
  --pad-cell-x: 16px;
}
[data-density="roomy"] {
  --row-h: var(--row-h-roomy);
  --control-h: var(--control-h-lg);
  --pad-card: 28px;
  --pad-cell-y: 16px;
  --pad-cell-x: 20px;
}

/* Radius modifiers */
[data-radius="square"] {
  --r-control: 2px;
  --r-card: 4px;
  --r-pill: 4px;
}
[data-radius="soft"] {
  --r-control: var(--radius-sm);
  --r-card: var(--radius-lg);
  --r-pill: var(--radius-pill);
}
[data-radius="pill"] {
  --r-control: var(--radius-pill);
  --r-card: var(--radius-xl);
  --r-pill: var(--radius-pill);
}

/* Accent presets */
[data-accent="violet"] { --accent-500: #5B3FD9; --accent-600: #4A30B8; --accent-50: #F2EEFC; --accent-200: #C4B2F0; --text-accent: #4A30B8; }
[data-accent="indigo"] { --accent-500: #2D5BFF; --accent-600: #1F45D6; --accent-50: #EEF2FF; --accent-200: #B6C4FF; --text-accent: #1F45D6; }
[data-accent="blue"]   { --accent-500: #1F6FEB; --accent-600: #1858BF; --accent-50: #EFF6FF; --accent-200: #B6D2FA; --text-accent: #1858BF; }
[data-accent="teal"]   { --accent-500: #0E7C66; --accent-600: #0A5F4F; --accent-50: #ECFDF7; --accent-200: #9BE3D0; --text-accent: #0A5F4F; }
[data-accent="mono"]   { --accent-500: #18181B; --accent-600: #0A0A0C; --accent-50: #F4F4F5; --accent-200: #C8C8CE; --text-accent: #18181B; }

[data-theme="dark"] {
  /* Override accent-50 / accent-200 so .badge--accent, .kpi--accent, sidebar active, inbox-active, chip active, chat-bubble--out all stay legible on dark */
  --accent-50:  #1F1850;
  --accent-200: #C4B2F0;
  --accent-700: #C4B2F0;
}
[data-theme="dark"][data-accent="violet"] { --accent-50: #1F1448; --accent-200: #C4B2F0; --accent-700: #C4B2F0; --text-accent: #B9A4F5; }
[data-theme="dark"][data-accent="indigo"] { --accent-50: #16215A; --accent-200: #B6C4FF; --accent-700: #B6C4FF; }
[data-theme="dark"][data-accent="blue"]   { --accent-50: #0F2A57; --accent-200: #B6D2FA; --accent-700: #B6D2FA; }
[data-theme="dark"][data-accent="teal"]   { --accent-50: #0A3B30; --accent-200: #9BE3D0; --accent-700: #9BE3D0; }
[data-theme="dark"][data-accent="mono"]   { --accent-50: #1F1F26; --accent-200: #ECECF1; --accent-700: #ECECF1; }
[data-theme="dark"][data-accent="violet"] .__legacy { --text-accent: #B9A4F5; }
[data-theme="dark"][data-accent="indigo"] { --text-accent: #93AAFF; }
[data-theme="dark"][data-accent="blue"]   { --text-accent: #79AAFF; }
[data-theme="dark"][data-accent="teal"]   { --text-accent: #5BD2BB; }
[data-theme="dark"][data-accent="mono"]   { --text-accent: #ECECF1; --accent-500: #ECECF1; --accent-600: #FFFFFF; }