/* ==========================================
   EVOS ServiceDesk Design System
   Version: 1.0
   Created: 2025-11-04
   ========================================== */

:root {
  /* ===== COLOR PALETTE ===== */
  /* Primary - Blue */
  --color-primary-50: #eff6ff;
  --color-primary-100: #dbeafe;
  --color-primary-200: #bfdbfe;
  --color-primary-300: #93c5fd;
  --color-primary-400: #60a5fa;
  --color-primary-500: #3b82f6;
  --color-primary-600: #2563eb;
  --color-primary-700: #1d4ed8;
  --color-primary-800: #1e40af;
  --color-primary-900: #1e3a8a;

  /* Secondary - Slate (replacing gray) */
  --color-slate-50: #f8fafc;
  --color-slate-100: #f1f5f9;
  --color-slate-200: #e2e8f0;
  --color-slate-300: #cbd5e1;
  --color-slate-400: #94a3b8;
  --color-slate-500: #64748b;
  --color-slate-600: #475569;
  --color-slate-700: #334155;
  --color-slate-800: #1e293b;
  --color-slate-900: #0f172a;

  /* Success - Green */
  --color-success-50: #f0fdf4;
  --color-success-100: #dcfce7;
  --color-success-200: #bbf7d0;
  --color-success-300: #86efac;
  --color-success-400: #4ade80;
  --color-success-500: #22c55e;
  --color-success-600: #16a34a;
  --color-success-700: #15803d;
  --color-success-800: #166534;
  --color-success-900: #145231;

  /* Warning - Amber */
  --color-warning-50: #fffbeb;
  --color-warning-100: #fef3c7;
  --color-warning-200: #fde68a;
  --color-warning-300: #fcd34d;
  --color-warning-400: #fbbf24;
  --color-warning-500: #f59e0b;
  --color-warning-600: #d97706;
  --color-warning-700: #b45309;
  --color-warning-800: #92400e;
  --color-warning-900: #78350f;

  /* Danger - Red */
  --color-danger-50: #fef2f2;
  --color-danger-100: #fee2e2;
  --color-danger-200: #fecaca;
  --color-danger-300: #fca5a5;
  --color-danger-400: #f87171;
  --color-danger-500: #ef4444;
  --color-danger-600: #dc2626;
  --color-danger-700: #b91c1c;
  --color-danger-800: #991b1b;
  --color-danger-900: #7f1d1d;

  /* Neutral - Black/White */
  --color-white: #ffffff;
  --color-black: #000000;
  --color-transparent: transparent;

  /* ===== SEMANTIC COLORS ===== */
  --color-text-primary: var(--color-slate-900);
  --color-text-secondary: var(--color-slate-600);
  --color-text-tertiary: var(--color-slate-500);
  --color-text-inverse: var(--color-white);

  --color-bg-primary: var(--color-white);
  --color-bg-secondary: var(--color-slate-50);
  --color-bg-tertiary: var(--color-slate-100);

  --color-border-light: var(--color-slate-200);
  --color-border-default: var(--color-slate-300);
  --color-border-dark: var(--color-slate-400);

  --color-interactive-focus: var(--color-primary-500);
  --color-interactive-disabled: var(--color-slate-300);

  --color-feedback-success: var(--color-success-500);
  --color-feedback-warning: var(--color-warning-500);
  --color-feedback-error: var(--color-danger-500);
  --color-feedback-info: var(--color-primary-500);
}

/* ===== DARK MODE (future support) ===== */
@media (prefers-color-scheme: dark) {
  :root {
    --color-text-primary: var(--color-slate-50);
    --color-text-secondary: var(--color-slate-300);
    --color-text-tertiary: var(--color-slate-400);

    --color-bg-primary: var(--color-slate-900);
    --color-bg-secondary: var(--color-slate-800);
    --color-bg-tertiary: var(--color-slate-700);

    --color-border-light: var(--color-slate-700);
    --color-border-default: var(--color-slate-600);
    --color-border-dark: var(--color-slate-500);
  }
}

/* ===== BASE STYLES ===== */
* {
  box-sizing: border-box;
}

html, body {
  color: var(--color-text-primary);
  background-color: var(--color-bg-primary);
}

/* ===== COLOR UTILITY CLASSES ===== */
.text-primary { color: var(--color-text-primary); }
.text-secondary { color: var(--color-text-secondary); }
.text-tertiary { color: var(--color-text-tertiary); }
.text-inverse { color: var(--color-text-inverse); }

.bg-primary { background-color: var(--color-bg-primary); }
.bg-secondary { background-color: var(--color-bg-secondary); }
.bg-tertiary { background-color: var(--color-bg-tertiary); }

.border-light { border-color: var(--color-border-light); }
.border-default { border-color: var(--color-border-default); }
.border-dark { border-color: var(--color-border-dark); }

.text-success { color: var(--color-feedback-success); }
.text-warning { color: var(--color-feedback-warning); }
.text-error { color: var(--color-feedback-error); }
.text-info { color: var(--color-feedback-info); }

.bg-success { background-color: var(--color-feedback-success); }
.bg-warning { background-color: var(--color-feedback-warning); }
.bg-error { background-color: var(--color-feedback-error); }
.bg-info { background-color: var(--color-feedback-info); }