@import "../../theme.css";
@import "palettes.css";

:root {
  --color-primary: #4f46e5;
  --color-primary-rgb: 79 70 229;
  --color-primary-contrast: #ffffff;
  --color-primary-hover: #4338ca;
  --color-primary-dark: #3730a3;
  --color-primary-dark-rgb: 55 48 163;
  --color-primary-10: rgb(79 70 229 / 0.1);
  --color-primary-20: rgb(79 70 229 / 0.18);
  --color-primary-50: rgb(79 70 229 / 0.5);

  --color-secondary: #475569;
  --color-secondary-rgb: 71 85 105;
  --color-secondary-dark: #334155;
  --color-secondary-dark-rgb: 51 65 85;

  --color-accent: #2563eb;
  --color-accent-rgb: 37 99 235;
  --color-accent-contrast: #ffffff;
  --color-accent-dark: #1d4ed8;
  --color-accent-dark-rgb: 29 78 216;
  --color-accent-10: rgb(37 99 235 / 0.1);
  --color-accent-20: rgb(37 99 235 / 0.18);
  --color-accent-50: rgb(37 99 235 / 0.5);

  --color-info: #2563eb;
  --color-info-rgb: 37 99 235;
  --color-info-bg: #eff6ff;
  --color-info-border: #bfdbfe;
  --color-info-text: #1e3a8a;

  --color-bg: #f8fafc;
  --color-bg-card: #ffffff;
  --color-surface: #ffffff;
  --color-text: #0f172a;
  --color-text-secondary: #334155;
  --color-text-muted: #64748b;
  --color-border: #dbe4f0;
  --color-border-light: rgb(148 163 184 / 0.16);
  --color-border-dark: rgb(15 23 42 / 0.12);
  --color-overlay: rgb(15 23 42 / 0.45);

  --font-sans: "Fira Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-heading: var(--font-sans);

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-2xl: 24px;

  --shadow-sm: 0 8px 20px rgb(15 23 42 / 0.06);
  --shadow-md: 0 12px 30px rgb(15 23 42 / 0.08);
  --shadow-lg: 0 20px 48px rgb(15 23 42 / 0.12);
  --shadow-xl: 0 28px 64px rgb(15 23 42 / 0.14);
  --shadow-glass: 0 12px 30px rgb(15 23 42 / 0.08);
  --shadow-glass-sm: 0 8px 18px rgb(15 23 42 / 0.05);
  --shadow-card: 0 10px 24px rgb(15 23 42 / 0.07);
  --shadow-modal: 0 24px 64px rgb(15 23 42 / 0.16);
  --shadow-focus: 0 0 0 2px #ffffff, 0 0 0 5px #4f46e5;

  --state-loading-bg: rgb(248 250 252 / 0.88);
  --state-empty-bg: #f1f5f9;
  --state-border-subtle: #cbd5e1;

  --control-bg: rgb(255 255 255 / 0.96);
  --control-bg-hover: #f8fafc;
  --control-border: #cbd5e1;
  --control-border-hover: #94a3b8;
  --control-placeholder: #94a3b8;
  --control-label-bg: #ffffff;
  --control-toggle-track: #cbd5e1;
  --control-toggle-thumb: #ffffff;

  --color-badge-user-bg: #f8fafc;
  --color-badge-user-text: #334155;
  --color-badge-admin-bg: #e0e7ff;
  --color-badge-admin-text: #3730a3;

  --status-active-bg: #dcfce7;
  --status-active-text: #166534;
  --status-draft-bg: #f8fafc;
  --status-draft-text: #475569;
  --status-paused-bg: #fff7ed;
  --status-paused-text: #c2410c;
  --status-pending-bg: #eff6ff;
  --status-pending-text: #1d4ed8;
  --status-error-bg: #fef2f2;
  --status-error-text: #b91c1c;

  --nav-item-text: #475569;
  --nav-item-hover-text: #0f172a;
  --nav-section-text: #94a3b8;
  --nav-active-bg: rgb(79 70 229 / 0.1);
  --nav-active-text: #312e81;
  --nav-active-border: rgb(79 70 229 / 0.18);
  --nav-active-shadow: 0 10px 24px rgb(79 70 229 / 0.12);

  --color-auth-showcase: #ffffff;
  --auth-shell-glow: radial-gradient(circle at top, rgb(79 70 229 / 0.16), transparent 58%);

  --theme-toggle-bg: rgb(255 255 255 / 0.92);
  --theme-toggle-border: #dbe4f0;
  --theme-toggle-text: #475569;
  --theme-toggle-hover-bg: #f8fafc;
  --theme-toggle-hover-text: #312e81;
  --theme-toggle-shadow: 0 8px 18px rgb(15 23 42 / 0.08);

  --chart-messages: #475569;
  --chart-conversations: var(--color-primary);
  --chart-leads: var(--color-accent);
  --chart-grid: rgb(148 163 184 / 0.18);
  --chart-text: var(--color-text-muted);
}

html[data-theme="modern-saas"].dark {
  --color-primary: #818cf8;
  --color-primary-rgb: 129 140 248;
  --color-primary-contrast: #0f172a;
  --color-primary-hover: #a5b4fc;
  --color-primary-dark: #6366f1;
  --color-primary-dark-rgb: 99 102 241;
  --color-primary-10: rgb(129 140 248 / 0.14);
  --color-primary-20: rgb(129 140 248 / 0.22);
  --color-primary-50: rgb(129 140 248 / 0.5);

  --color-accent: #60a5fa;
  --color-accent-rgb: 96 165 250;
  --color-accent-contrast: #0f172a;
  --color-accent-dark: #3b82f6;
  --color-accent-dark-rgb: 59 130 246;
  --color-accent-10: rgb(96 165 250 / 0.12);
  --color-accent-20: rgb(96 165 250 / 0.2);
  --color-accent-50: rgb(96 165 250 / 0.5);

  --color-info: #60a5fa;
  --color-info-rgb: 96 165 250;
  --color-info-bg: rgb(96 165 250 / 0.12);
  --color-info-border: rgb(96 165 250 / 0.22);
  --color-info-text: #bfdbfe;

  --color-bg: #020617;
  --color-bg-card: #0f172a;
  --color-surface: #0f172a;
  --color-text: #e2e8f0;
  --color-text-secondary: #cbd5e1;
  --color-text-muted: #94a3b8;
  --color-border: #1e293b;
  --color-border-light: rgb(148 163 184 / 0.14);
  --color-border-dark: rgb(15 23 42 / 0.4);
  --color-overlay: rgb(2 6 23 / 0.68);

  --shadow-sm: 0 10px 24px rgb(2 6 23 / 0.45);
  --shadow-md: 0 16px 36px rgb(2 6 23 / 0.5);
  --shadow-lg: 0 24px 56px rgb(2 6 23 / 0.58);
  --shadow-xl: 0 32px 72px rgb(2 6 23 / 0.68);
  --shadow-glass: 0 16px 36px rgb(2 6 23 / 0.52);
  --shadow-glass-sm: 0 10px 22px rgb(2 6 23 / 0.4);
  --shadow-card: 0 14px 30px rgb(2 6 23 / 0.44);
  --shadow-modal: 0 28px 72px rgb(2 6 23 / 0.72);
  --shadow-focus: 0 0 0 2px #020617, 0 0 0 5px #818cf8;

  --state-loading-bg: rgb(2 6 23 / 0.88);
  --state-empty-bg: #111827;
  --state-border-subtle: #334155;

  --control-bg: rgb(15 23 42 / 0.92);
  --control-bg-hover: #111827;
  --control-border: #334155;
  --control-border-hover: #475569;
  --control-placeholder: #64748b;
  --control-label-bg: #0f172a;
  --control-toggle-track: #334155;
  --control-toggle-thumb: #e2e8f0;

  --color-badge-user-bg: #0f172a;
  --color-badge-user-text: #cbd5e1;
  --color-badge-admin-bg: rgb(129 140 248 / 0.18);
  --color-badge-admin-text: #c7d2fe;

  --status-active-bg: rgb(34 197 94 / 0.18);
  --status-active-text: #86efac;
  --status-draft-bg: rgb(148 163 184 / 0.12);
  --status-draft-text: #cbd5e1;
  --status-paused-bg: rgb(249 115 22 / 0.18);
  --status-paused-text: #fdba74;
  --status-pending-bg: rgb(96 165 250 / 0.18);
  --status-pending-text: #bfdbfe;
  --status-error-bg: rgb(248 113 113 / 0.16);
  --status-error-text: #fca5a5;

  --nav-item-text: #94a3b8;
  --nav-item-hover-text: #f8fafc;
  --nav-section-text: #64748b;
  --nav-active-bg: rgb(99 102 241 / 0.16);
  --nav-active-text: #e0e7ff;
  --nav-active-border: rgb(129 140 248 / 0.22);
  --nav-active-shadow: 0 12px 28px rgb(99 102 241 / 0.18);

  --color-auth-showcase: #0f172a;
  --auth-shell-glow: radial-gradient(circle at top, rgb(129 140 248 / 0.18), transparent 62%);

  --theme-toggle-bg: rgb(15 23 42 / 0.88);
  --theme-toggle-border: #334155;
  --theme-toggle-text: #cbd5e1;
  --theme-toggle-hover-bg: #111827;
  --theme-toggle-hover-text: #e0e7ff;
  --theme-toggle-shadow: 0 10px 24px rgb(2 6 23 / 0.42);

  --chart-messages: #cbd5e1;
  --chart-grid: rgb(148 163 184 / 0.14);
}