/* ============================================================
   CCW Portal — CSS Custom Properties (Design Tokens)
   ============================================================ */

:root {
  /* ── Brand ──────────────────────────────────────────────── */
  --color-brand-primary: #1a56db;
  --color-brand-primary-hover: #1648b8;
  --color-brand-primary-light: #e8effd;
  --color-brand-primary-dark: #1e40af;

  /* ── Category Accents ────────────────────────────────────── */
  --color-complaint: #d97706;
  --color-complaint-light: #fef3c7;
  --color-complaint-dark: #92400e;
  --color-complaint-border: #f59e0b;

  --color-compliment: #0d9488;
  --color-compliment-light: #ccfbf1;
  --color-compliment-dark: #115e59;
  --color-compliment-border: #14b8a6;

  --color-whistleblowing: #1e3a5f;
  --color-whistleblowing-light: #dbeafe;
  --color-whistleblowing-dark: #0f172a;
  --color-whistleblowing-border: #3b82f6;

  /* ── Severity ────────────────────────────────────────────── */
  --color-severity-low: #16a34a;
  --color-severity-low-bg: #dcfce7;
  --color-severity-medium: #d97706;
  --color-severity-medium-bg: #fef3c7;
  --color-severity-high: #dc2626;
  --color-severity-high-bg: #fee2e2;
  --color-severity-critical: #7c2d12;
  --color-severity-critical-bg: #fef2f2;
  --color-severity-serious: #dc2626;
  --color-severity-serious-bg: #fee2e2;

  /* ── Status ──────────────────────────────────────────────── */
  --color-status-new: #6366f1;
  --color-status-new-bg: #eef2ff;
  --color-status-triaged: #8b5cf6;
  --color-status-triaged-bg: #f5f3ff;
  --color-status-investigating: #2563eb;
  --color-status-investigating-bg: #eff6ff;
  --color-status-awaiting: #d97706;
  --color-status-awaiting-bg: #fef3c7;
  --color-status-resolved: #16a34a;
  --color-status-resolved-bg: #dcfce7;
  --color-status-closed: #6b7280;
  --color-status-closed-bg: #f3f4f6;
  --color-status-escalated: #dc2626;
  --color-status-escalated-bg: #fee2e2;
  --color-status-received: #6366f1;
  --color-status-received-bg: #eef2ff;
  --color-status-logged: #16a34a;
  --color-status-logged-bg: #dcfce7;
  --color-status-referred: #d97706;
  --color-status-referred-bg: #fef3c7;

  /* ── Neutrals (Light Theme) ──────────────────────────────── */
  --color-bg-primary: #ffffff;
  --color-bg-secondary: #f9fafb;
  --color-bg-tertiary: #f3f4f6;
  --color-bg-elevated: #ffffff;
  --color-border: #e5e7eb;
  --color-border-strong: #d1d5db;
  --color-text-primary: #111827;
  --color-text-secondary: #6b7280;
  --color-text-tertiary: #9ca3af;
  --color-text-inverse: #ffffff;
  --color-text-placeholder: #9ca3af;

  /* ── Feedback ────────────────────────────────────────────── */
  --color-success: #16a34a;
  --color-success-bg: #f0fdf4;
  --color-success-border: #bbf7d0;
  --color-warning: #d97706;
  --color-warning-bg: #fffbeb;
  --color-warning-border: #fde68a;
  --color-error: #dc2626;
  --color-error-bg: #fef2f2;
  --color-error-border: #fecaca;
  --color-info: #2563eb;
  --color-info-bg: #eff6ff;
  --color-info-border: #bfdbfe;

  /* ── Shadows ─────────────────────────────────────────────── */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.05), 0 2px 4px rgba(0, 0, 0, 0.04);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.07), 0 4px 6px rgba(0, 0, 0, 0.05);
  --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.08), 0 8px 10px rgba(0, 0, 0, 0.04);

  /* ── Spacing Scale (4px base) ────────────────────────────── */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-7: 1.75rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;

  /* ── Border Radius ───────────────────────────────────────── */
  --radius-sm: 0.25rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
  --radius-2xl: 1.5rem;
  --radius-full: 9999px;

  /* ── Transitions ─────────────────────────────────────────── */
  --transition-fast: 150ms ease;
  --transition-normal: 250ms ease;
  --transition-slow: 350ms ease;

  /* ── Z-Index Scale ───────────────────────────────────────── */
  --z-base: 0;
  --z-raised: 10;
  --z-dropdown: 50;
  --z-sidebar: 100;
  --z-topbar: 200;
  --z-modal-backdrop: 300;
  --z-modal: 400;
  --z-toast: 500;
  --z-tooltip: 600;

  /* ── Layout ──────────────────────────────────────────────── */
  --sidebar-width: 260px;
  --sidebar-collapsed-width: 64px;
  --topbar-height: 56px;
  --content-max-width: 1280px;
  --content-padding: var(--space-8);
}

/* ── Dark Theme ────────────────────────────────────────────── */
[data-theme="dark"] {
  --color-bg-primary: #111827;
  --color-bg-secondary: #1f2937;
  --color-bg-tertiary: #374151;
  --color-bg-elevated: #1f2937;
  --color-border: #374151;
  --color-border-strong: #4b5563;
  --color-text-primary: #f9fafb;
  --color-text-secondary: #d1d5db;
  --color-text-tertiary: #9ca3af;
  --color-text-placeholder: #6b7280;
  --color-brand-primary-light: #1e3a5f;

  --color-complaint-light: #451a03;
  --color-compliment-light: #042f2e;
  --color-whistleblowing-light: #172554;

  --color-severity-low-bg: #14532d;
  --color-severity-medium-bg: #451a03;
  --color-severity-high-bg: #450a0a;
  --color-severity-critical-bg: #450a0a;

  --color-status-new-bg: #1e1b4b;
  --color-status-triaged-bg: #2e1065;
  --color-status-investigating-bg: #1e3a5f;
  --color-status-awaiting-bg: #451a03;
  --color-status-resolved-bg: #14532d;
  --color-status-closed-bg: #374151;
  --color-status-escalated-bg: #450a0a;

  --color-success-bg: #14532d;
  --color-warning-bg: #451a03;
  --color-error-bg: #450a0a;
  --color-info-bg: #1e3a5f;

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.5), 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.4), 0 2px 4px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.5), 0 4px 6px rgba(0, 0, 0, 0.4);
  --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.6), 0 8px 10px rgba(0, 0, 0, 0.4);
}

/* ── Reduced Motion ────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}