/* =========================================
   CLIENTSIDETOOLS THEMES
   ========================================= */

/* --- LIGHT THEME (Default) --- */
:root,
[data-theme="light"] {
  --bg-primary: #ffffff;
  --bg-secondary: #f8fafc; /* Slate 50 */
  --bg-tertiary: #f1f5f9;  /* Slate 100 */
  
  --text-primary: #0f172a;   /* Slate 900 */
  --text-secondary: #475569; /* Slate 600 */
  --text-muted: #94a3b8;     /* Slate 400 */
  
  --border-default: #e2e8f0; /* Slate 200 */
  --border-strong: #cbd5e1;  /* Slate 300 */

  /* Brand Colors */
  --brand-primary: #0d9488;  /* Teal 600 */
  --brand-primary-hover: #0f766e; /* Teal 700 */
  --brand-primary-light: #ccfbf1; /* Teal 100 */
  
  /* Semantic Colors */
  --color-success: #10b981;
  --color-warning: #f59e0b;
  --color-danger: #ef4444;
  --color-info: #3b82f6;

  /* Focus Ring */
  --focus-ring: 0 0 0 3px rgba(13, 148, 136, 0.4);

  /* Shadows */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.05), 0 4px 6px -2px rgba(0, 0, 0, 0.025);
}

/* --- DARK THEME --- */
[data-theme="dark"] {
  --bg-primary: #0f172a;   /* Slate 900 */
  --bg-secondary: #1e293b; /* Slate 800 */
  --bg-tertiary: #334155;  /* Slate 700 */
  
  --text-primary: #f8fafc;   /* Slate 50 */
  --text-secondary: #cbd5e1; /* Slate 300 */
  --text-muted: #64748b;     /* Slate 500 */
  
  --border-default: #334155; /* Slate 700 */
  --border-strong: #475569;  /* Slate 600 */

  --brand-primary: #2dd4bf;  /* Teal 400 */
  --brand-primary-hover: #14b8a6; /* Teal 500 */
  --brand-primary-light: #042f2e; /* Teal 900 */

  --color-success: #34d399;
  --color-warning: #fbbf24;
  --color-danger: #f87171;
  --color-info: #60a5fa;

  --focus-ring: 0 0 0 3px rgba(45, 212, 191, 0.4);

  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -1px rgba(0, 0, 0, 0.2);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -2px rgba(0, 0, 0, 0.3);
}

/* System Preference Fallback (if JS hasn't loaded or data-theme is missing) */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg-primary: #0f172a;
    --bg-secondary: #1e293b;
    --bg-tertiary: #334155;
    --text-primary: #f8fafc;
    --text-secondary: #cbd5e1;
    --text-muted: #64748b;
    --border-default: #334155;
    --border-strong: #475569;
    --brand-primary: #2dd4bf;
    --brand-primary-hover: #14b8a6;
    --brand-primary-light: #042f2e;
    --color-success: #34d399;
    --color-warning: #fbbf24;
    --color-danger: #f87171;
    --color-info: #60a5fa;
    --focus-ring: 0 0 0 3px rgba(45, 212, 191, 0.4);
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -1px rgba(0, 0, 0, 0.2);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -2px rgba(0, 0, 0, 0.3);
  }
}