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

:root {
  --color-primary: #1d4ed8;
  --color-primary-rgb: 29 78 216;
  --color-primary-hover: #1e40af;
  --color-primary-dark: #1e3a8a;
  --color-primary-dark-rgb: 30 58 138;
  --color-primary-10: rgb(29 78 216 / 0.12);
  --color-primary-20: rgb(29 78 216 / 0.24);
  --color-primary-50: rgb(29 78 216 / 0.5);

  --color-accent: #ea580c;
  --color-accent-rgb: 234 88 12;
  --color-accent-dark: #c2410c;
  --color-accent-dark-rgb: 194 65 12;

  --color-bg: #fff8dc;
  --color-bg-card: #fffdf3;
  --color-surface: #fffdf3;
  --color-text: #0a0a0a;
  --color-text-secondary: #18181b;
  --color-text-muted: #3f3f46;
  --color-border: #0a0a0a;
  --color-border-light: rgba(0, 0, 0, 0.25);
  --color-border-dark: rgba(0, 0, 0, 0.45);

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

  --radius-sm: 0;
  --radius-md: 2px;
  --radius-lg: 4px;
  --radius-xl: 6px;

  --border-width: 2px;
  --border-width-2: 3px;

  --shadow-sm: 2px 2px 0 #0a0a0a;
  --shadow-md: 3px 3px 0 #0a0a0a;
  --shadow-lg: 4px 4px 0 #0a0a0a;
  --shadow-xl: 6px 6px 0 #0a0a0a;
  --shadow-glass: var(--shadow-sm);
  --shadow-glass-sm: 1px 1px 0 #0a0a0a;
  --shadow-glow: none;
  --shadow-card: var(--shadow-sm);
  --shadow-modal: 8px 8px 0 #0a0a0a;
  --shadow-focus: 0 0 0 2px #fff8dc, 0 0 0 5px #0a0a0a;

  --button-hover-lift: 0.09375rem;
  --button-active-translate: 0.09375rem;
  --button-hover-shadow: var(--shadow-md);
  --button-active-shadow: var(--shadow-sm);

  --state-loading-bg: rgb(255 248 220 / 0.9);
  --state-empty-bg: #fff4cc;
  --state-border-subtle: #0a0a0a;

  --control-bg: var(--color-surface);
  --control-bg-hover: var(--state-empty-bg);
  --control-border: var(--color-border);
  --control-border-hover: var(--color-border);
  --control-placeholder: var(--color-text-muted);
  --control-label-bg: var(--color-surface);
  --control-toggle-track: #0a0a0a;
  --control-toggle-thumb: #fffdf3;

  --color-auth-showcase: #fffdf3;

  --color-badge-user-bg: #fff8dc;
  --color-badge-user-text: #0a0a0a;
  --color-badge-admin-bg: rgb(29 78 216 / 0.12);
  --color-badge-admin-text: #1d4ed8;

  --status-active-bg: rgb(29 78 216 / 0.12);
  --status-active-text: #1d4ed8;
  --status-draft-bg: #f5f5f5;
  --status-draft-text: #3f3f46;
  --status-paused-bg: rgb(234 88 12 / 0.12);
  --status-paused-text: #ea580c;
  --status-pending-bg: #eff6ff;
  --status-pending-text: #1e40af;
  --status-error-bg: #fef2f2;
  --status-error-text: #b91c1c;

  --chart-messages: #0a0a0a;
  --chart-conversations: var(--color-primary);
  --chart-leads: var(--color-accent);
  --chart-grid: rgba(0, 0, 0, 0.12);
  --chart-text: var(--color-text-muted);
}

html.dark {
  --color-primary: #93c5fd;
  --color-primary-rgb: 147 197 253;
  --color-primary-hover: #bfdbfe;
  --color-primary-dark: #60a5fa;
  --color-primary-dark-rgb: 96 165 250;
  --color-primary-10: rgb(147 197 253 / 0.16);
  --color-primary-20: rgb(147 197 253 / 0.3);
  --color-primary-50: rgb(147 197 253 / 0.55);

  --color-accent: #fb923c;
  --color-accent-rgb: 251 146 60;
  --color-accent-dark: #f97316;
  --color-accent-dark-rgb: 249 115 22;

  --color-bg: #121212;
  --color-bg-card: #1b1b1b;
  --color-surface: #1b1b1b;
  --color-text: #f8fafc;
  --color-text-secondary: #e2e8f0;
  --color-text-muted: #94a3b8;
  --color-border: #f8fafc;
  --color-border-light: rgba(248, 250, 252, 0.4);
  --color-border-dark: rgba(0, 0, 0, 0.65);

  --shadow-sm: 2px 2px 0 #f8fafc;
  --shadow-md: 3px 3px 0 #f8fafc;
  --shadow-lg: 4px 4px 0 #f8fafc;
  --shadow-xl: 6px 6px 0 #f8fafc;
  --shadow-glass: var(--shadow-sm);
  --shadow-glass-sm: 1px 1px 0 #f8fafc;
  --shadow-card: var(--shadow-sm);
  --shadow-modal: 8px 8px 0 #f8fafc;
  --shadow-focus: 0 0 0 2px #121212, 0 0 0 5px #f8fafc;

  --state-loading-bg: rgb(18 18 18 / 0.9);
  --state-empty-bg: #171717;
  --state-border-subtle: #f8fafc;

  --control-bg: var(--color-surface);
  --control-bg-hover: var(--state-empty-bg);
  --control-border: var(--color-border);
  --control-border-hover: var(--color-border);
  --control-placeholder: var(--color-text-muted);
  --control-label-bg: var(--color-surface);
  --control-toggle-track: #f8fafc;
  --control-toggle-thumb: #121212;

  --color-auth-showcase: #1b1b1b;

  --color-badge-user-bg: #1b1b1b;
  --color-badge-user-text: #f8fafc;
  --color-badge-admin-bg: rgb(147 197 253 / 0.15);
  --color-badge-admin-text: #93c5fd;

  --status-active-bg: rgb(147 197 253 / 0.15);
  --status-active-text: #93c5fd;
  --status-draft-bg: rgba(248, 250, 252, 0.08);
  --status-draft-text: #94a3b8;
  --status-paused-bg: rgb(251 146 60 / 0.15);
  --status-paused-text: #fb923c;
  --status-pending-bg: rgb(96 165 250 / 0.15);
  --status-pending-text: #60a5fa;
  --status-error-bg: rgb(248 113 113 / 0.15);
  --status-error-text: #f87171;

  --chart-messages: #f8fafc;
  --chart-conversations: var(--color-primary);
  --chart-leads: var(--color-accent);
  --chart-grid: rgba(248, 250, 252, 0.12);
  --chart-text: var(--color-text-muted);
}