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

:root {
  --color-primary: #2563eb;
  --color-primary-rgb: 37 99 235;
  --color-primary-contrast: #ffffff;
  --color-primary-hover: #1d4ed8;
  --color-primary-dark: #1e40af;
  --color-primary-dark-rgb: 30 64 175;
  --color-primary-10: rgb(37 99 235 / 0.1);
  --color-primary-20: rgb(37 99 235 / 0.18);
  --color-primary-50: rgb(37 99 235 / 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-success: #16a34a;
  --color-success-rgb: 22 163 74;
  --color-success-bg: #dcfce7;
  --color-success-border: #bbf7d0;
  --color-success-text: #166534;
  --color-warning: #d97706;
  --color-warning-rgb: 217 119 6;
  --color-warning-bg: #fffbeb;
  --color-warning-border: #fde68a;
  --color-warning-text: #92400e;
  --color-error: #dc2626;
  --color-error-rgb: 220 38 38;
  --color-error-bg: #fef2f2;
  --color-error-border: #fecaca;
  --color-error-text: #991b1b;
  --button-success-bg: var(--color-success);
  --button-success-text: #ffffff;
  --button-success-border: #15803d;
  --button-danger-bg: var(--color-error);
  --button-danger-text: #ffffff;
  --button-danger-border: #b91c1c;
  --button-warning-bg: var(--color-warning);
  --button-warning-text: #ffffff;
  --button-warning-border: #b45309;
  --pagination-bg: #ffffff;
  --pagination-border: #dbe4f0;
  --pagination-active-bg: var(--color-primary);
  --pagination-active-text: var(--color-primary-contrast);
  --feedback-success-bg: var(--color-success-bg);
  --feedback-warning-bg: var(--color-warning-bg);
  --feedback-error-bg: var(--color-error-bg);
  --disabled-bg: #e2e8f0;
  --disabled-text: #64748b;
  --disabled-border: #cbd5e1;

  --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);
  --modern-saas-page-bg: radial-gradient(circle at top left, rgb(var(--color-primary-rgb) / 0.08), transparent 34%), linear-gradient(180deg, #f8fafc 0%, #eff6ff 100%);
  --modern-saas-panel-bg: linear-gradient(180deg, rgb(255 255 255 / 0.98), rgb(248 250 252 / 0.96));
  --modern-saas-panel-border: rgb(148 163 184 / 0.22);
  --modern-saas-panel-highlight: inset 0 1px 0 rgb(255 255 255 / 0.92);
  --modern-saas-hover-border: rgb(var(--color-primary-rgb) / 0.3);
  --modern-saas-table-row-hover: rgb(var(--color-primary-rgb) / 0.055);

  --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 #2563eb;

  --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: #1e40af;

  --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: #64748b;
  --nav-active-bg: rgb(37 99 235 / 0.1);
  --nav-active-text: #312e81;
  --nav-active-border: rgb(37 99 235 / 0.18);
  --nav-active-shadow: 0 10px 24px rgb(37 99 235 / 0.12);

  --color-auth-showcase: #ffffff;
  --auth-shell-glow: radial-gradient(circle at top, rgb(37 99 235 / 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: #10B981;
  --chart-grid: rgb(148 163 184 / 0.18);
  --chart-text: var(--color-text-muted);
}

html[data-theme="modern-saas"].dark {
  --color-primary: #60a5fa;
  --color-primary-rgb: 96 165 250;
  --color-primary-contrast: #0f172a;
  --color-primary-hover: #93c5fd;
  --color-primary-dark: #3b82f6;
  --color-primary-dark-rgb: 59 130 246;
  --color-primary-10: rgb(96 165 250 / 0.14);
  --color-primary-20: rgb(96 165 250 / 0.22);
  --color-primary-50: rgb(96 165 250 / 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-success: #4ade80;
  --color-success-rgb: 74 222 128;
  --color-success-bg: rgb(34 197 94 / 0.18);
  --color-success-border: rgb(74 222 128 / 0.28);
  --color-success-text: #bbf7d0;
  --color-warning: #fbbf24;
  --color-warning-rgb: 251 191 36;
  --color-warning-bg: rgb(251 191 36 / 0.16);
  --color-warning-border: rgb(251 191 36 / 0.28);
  --color-warning-text: #fde68a;
  --color-error: #f87171;
  --color-error-rgb: 248 113 113;
  --color-error-bg: rgb(248 113 113 / 0.16);
  --color-error-border: rgb(248 113 113 / 0.28);
  --color-error-text: #fecaca;
  --button-success-bg: #22c55e;
  --button-success-text: #052e16;
  --button-success-border: #4ade80;
  --button-danger-bg: #ef4444;
  --button-danger-text: #450a0a;
  --button-danger-border: #f87171;
  --button-warning-bg: #f59e0b;
  --button-warning-text: #451a03;
  --button-warning-border: #fbbf24;
  --pagination-bg: #0f172a;
  --pagination-border: #334155;
  --pagination-active-bg: var(--color-primary);
  --pagination-active-text: var(--color-primary-contrast);
  --feedback-success-bg: var(--color-success-bg);
  --feedback-warning-bg: var(--color-warning-bg);
  --feedback-error-bg: var(--color-error-bg);
  --disabled-bg: #1e293b;
  --disabled-text: #64748b;
  --disabled-border: #334155;

  --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);
  --modern-saas-page-bg: radial-gradient(circle at top left, rgb(var(--color-primary-rgb) / 0.16), transparent 34%), linear-gradient(180deg, #020617 0%, #0f172a 100%);
  --modern-saas-panel-bg: linear-gradient(180deg, rgb(15 23 42 / 0.98), rgb(2 6 23 / 0.96));
  --modern-saas-panel-border: rgb(148 163 184 / 0.18);
  --modern-saas-panel-highlight: inset 0 1px 0 rgb(255 255 255 / 0.06);
  --modern-saas-hover-border: rgb(var(--color-primary-rgb) / 0.34);
  --modern-saas-table-row-hover: rgb(var(--color-primary-rgb) / 0.09);

  --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 #60a5fa;

  --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(96 165 250 / 0.18);
  --color-badge-admin-text: #bfdbfe;

  --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(96 165 250 / 0.16);
  --nav-active-text: #e0e7ff;
  --nav-active-border: rgb(96 165 250 / 0.22);
  --nav-active-shadow: 0 12px 28px rgb(96 165 250 / 0.18);

  --color-auth-showcase: #0f172a;
  --auth-shell-glow: radial-gradient(circle at top, rgb(96 165 250 / 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-leads: #34D399;
  --chart-messages: #cbd5e1;
  --chart-grid: rgb(148 163 184 / 0.14);
}