/* LocalAI Theme - CSS Variables System */
:root,
[data-theme="dark"] {
  --color-bg-primary: #0b0d14;
  --color-bg-secondary: #14172099;
  --color-bg-secondary: #161923;
  --color-bg-tertiary: #232838;
  --color-bg-overlay: rgba(11, 13, 20, 0.95);

  --color-surface-raised: #1a1e2c;
  --color-surface-sunken: #090b12;
  --color-surface-hover: #242938;

  --color-primary: #f1f3f8;
  --color-primary-hover: #ffffff;
  --color-primary-active: #d8dce6;
  --color-primary-text: #0a0c12;
  --color-primary-light: rgba(241, 243, 248, 0.08);
  --color-primary-border: rgba(241, 243, 248, 0.22);

  --color-secondary: #6b7487;
  --color-secondary-hover: #525b6e;
  --color-secondary-light: rgba(107, 116, 135, 0.12);

  --color-accent: #e8a87c;
  --color-accent-hover: #d89668;
  --color-accent-light: rgba(232, 168, 124, 0.14);

  --color-text-primary: #f1f3f8;
  --color-text-secondary: #a8adbd;
  --color-text-muted: #6c7084;
  --color-text-disabled: #3e4253;
  --color-text-inverse: #FFFFFF;

  --color-border-subtle: rgba(255, 255, 255, 0.06);
  --color-border-default: rgba(255, 255, 255, 0.12);
  --color-border-strong: rgba(255, 255, 255, 0.22);
  --color-border-divider: rgba(255, 255, 255, 0.05);
  --color-border-primary: rgba(255, 255, 255, 0.22);
  --color-border-focus: rgba(241, 243, 248, 0.38);

  --color-success: #22C55E;
  --color-success-light: rgba(34, 197, 94, 0.14);
  --color-success-border: rgba(34, 197, 94, 0.32);
  --color-warning: #F59E0B;
  --color-warning-light: rgba(245, 158, 11, 0.14);
  --color-warning-border: rgba(245, 158, 11, 0.32);
  --color-error: #EF4444;
  --color-error-light: rgba(239, 68, 68, 0.14);
  --color-error-border: rgba(239, 68, 68, 0.32);
  --color-info: #7dc7d1;
  --color-info-light: rgba(125, 199, 209, 0.14);
  --color-info-border: rgba(125, 199, 209, 0.32);
  --color-accent-border: rgba(232, 168, 124, 0.32);
  --color-modal-backdrop: rgba(0, 0, 0, 0.7);

  /* Data viz palette — distinct hues, readable on dark */
  --color-data-1: #7dc7d1;
  --color-data-2: #f87171;
  --color-data-3: #c084fc;
  --color-data-4: #fbbf24;
  --color-data-5: #34d399;
  --color-data-6: #fb923c;
  --color-data-7: #f472b6;
  --color-data-8: #22d3ee;

  /* Log streams */
  --color-log-stdout: #d1d5db;
  --color-log-stderr: #fca5a5;
  --color-log-info: #93c5fd;
  --color-log-warn: #fcd34d;

  --shadow-subtle: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.45);
  --shadow-md: 0 6px 18px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 16px 32px rgba(0, 0, 0, 0.55);
  --shadow-glow: var(--shadow-md);
  --shadow-sidebar: 1px 0 0 rgba(255, 255, 255, 0.06);

  /* Inset top-edge highlight — fakes elevation in dark mode */
  --shadow-inset-top: inset 0 1px 0 rgba(255, 255, 255, 0.06);

  --duration-fast: 150ms;
  --duration-normal: 200ms;
  --duration-slow: 300ms;
  --ease-default: cubic-bezier(0.4, 0, 0.2, 1);

  --spacing-xs: 0.25rem;
  --spacing-sm: 0.5rem;
  --spacing-md: 1rem;
  --spacing-lg: 1.5rem;
  --spacing-xl: 2rem;
  --spacing-2xl: 3rem;

  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 10px;
  --radius-xl: 14px;
  --radius-full: 9999px;

  /* Typography scale */
  --text-xs: 0.6875rem;
  --text-sm: 0.8125rem;
  --text-base: 0.9375rem;
  --text-lg: 1.0625rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 1.875rem;

  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  --leading-tight: 1.25;
  --leading-snug: 1.4;
  --leading-normal: 1.55;
  --leading-relaxed: 1.7;

  --sidebar-width: 200px;
  --sidebar-width-collapsed: 52px;
  --color-toggle-off: #3a4152;
  --color-toggle-on: var(--color-primary);
}

[data-theme="light"] {
  /* Pearl palette — soft cool off-white, clean layered surfaces */
  --color-bg-primary: #f5f6f8;       /* page: soft pearl */
  --color-bg-secondary: #ffffff;     /* raised surface */
  --color-bg-tertiary: #e7e9ef;      /* sunken wells */
  --color-bg-overlay: rgba(245, 246, 248, 0.92);

  --color-surface-raised: #ffffff;
  --color-surface-sunken: #eef0f4;
  --color-surface-hover: #edeff4;

  --color-primary: #14161f;          /* near-black (cool-leaning) */
  --color-primary-hover: #000000;
  --color-primary-active: #2a2e3a;
  --color-primary-text: #FFFFFF;
  --color-primary-light: rgba(20, 22, 31, 0.06);
  --color-primary-border: rgba(20, 22, 31, 0.2);

  --color-secondary: #525966;
  --color-secondary-hover: #3b414c;
  --color-secondary-light: rgba(82, 89, 102, 0.1);

  --color-accent: #c97b5a;           /* muted terracotta accent */
  --color-accent-hover: #b56a4a;
  --color-accent-light: rgba(201, 123, 90, 0.12);

  --color-text-primary: #14161f;     /* crisp near-black, cool-leaning */
  --color-text-secondary: #555a68;
  --color-text-muted: #8a8e9b;
  --color-text-disabled: #c2c5cf;
  --color-text-inverse: #FFFFFF;

  --color-border-subtle: rgba(20, 22, 31, 0.07);
  --color-border-default: rgba(20, 22, 31, 0.14);
  --color-border-strong: rgba(20, 22, 31, 0.32);
  --color-border-divider: rgba(20, 22, 31, 0.05);
  --color-border-primary: rgba(20, 22, 31, 0.22);
  --color-border-focus: rgba(20, 22, 31, 0.45);

  --color-success: #16A34A;
  --color-success-light: rgba(22, 163, 74, 0.1);
  --color-success-border: rgba(22, 163, 74, 0.3);
  --color-warning: #D97706;
  --color-warning-light: rgba(217, 119, 6, 0.1);
  --color-warning-border: rgba(217, 119, 6, 0.3);
  --color-error: #DC2626;
  --color-error-light: rgba(220, 38, 38, 0.09);
  --color-error-border: rgba(220, 38, 38, 0.3);
  --color-info: #0f7583;
  --color-info-light: rgba(15, 117, 131, 0.10);
  --color-info-border: rgba(15, 117, 131, 0.3);
  --color-accent-border: rgba(201, 123, 90, 0.3);
  --color-modal-backdrop: rgba(20, 22, 31, 0.5);

  /* Data viz palette */
  --color-data-1: #0f7583;
  --color-data-2: #c97b5a;
  --color-data-3: #8b5cf6;
  --color-data-4: #d97706;
  --color-data-5: #059669;
  --color-data-6: #dc2626;
  --color-data-7: #db2777;
  --color-data-8: #0891b2;

  --color-log-stdout: #14161f;
  --color-log-stderr: #b91c1c;
  --color-log-info: #0f7583;
  --color-log-warn: #b45309;

  --shadow-subtle: 0 1px 2px rgba(20, 22, 31, 0.05);
  --shadow-sm: 0 2px 6px rgba(20, 22, 31, 0.07);
  --shadow-md: 0 8px 20px rgba(20, 22, 31, 0.08);
  --shadow-lg: 0 20px 38px rgba(20, 22, 31, 0.1);
  --shadow-glow: var(--shadow-md);
  --shadow-sidebar: 4px 0 24px -12px rgba(20, 22, 31, 0.1), 1px 0 0 rgba(20, 22, 31, 0.06);

  --shadow-inset-top: inset 0 1px 0 rgba(255, 255, 255, 0.6);

  --color-toggle-off: #c5c8d2;
  --color-toggle-on: var(--color-primary);
}