/* ================================================================
   DESIGN TOKENS — single source of truth (--qs-*)
   ================================================================
   Linked globally (before style.css) so every page gets the same
   light/dark palette, spacing, radius, shadow and type scale.

   Values mirror the canonical set that previously lived only in the
   inline <style> of dashboard/templates/elements/dashboard-shared.html,
   which limited them to pages that include that partial.

   Usage: reference these instead of hardcoding values, e.g.
     color: var(--qs-text-primary);
     background: var(--qs-bg-primary);
     border-color: var(--qs-border-primary);
   They auto-switch in dark mode via the body.dark-mode block below.
   ================================================================ */

:root {
    /* --- Background Colors --- */
    --qs-bg-primary: #ffffff;
    --qs-bg-secondary: #f9fafb;
    --qs-bg-tertiary: #f1f5f9;
    --qs-bg-elevated: #ffffff;

    /* --- Text Colors --- */
    --qs-text-primary: #111827;
    --qs-text-secondary: #374151;
    --qs-text-muted: #6b7280;
    --qs-text-light: #9ca3af;

    /* --- Border Colors --- */
    --qs-border-primary: #e5e7eb;
    --qs-border-secondary: #e2e8f0;
    --qs-border-light: #f1f5f9;

    /* --- Accent Colors --- */
    --qs-accent: #3b82f6;
    --qs-accent-hover: #2563eb;
    --qs-accent-light: rgba(59, 130, 246, 0.1);
    --qs-accent-lighter: rgba(59, 130, 246, 0.05);
    --qs-accent-dark: #1e40af;

    /* --- Status Colors --- */
    --qs-danger: #ef4444;
    --qs-danger-hover: #dc2626;
    --qs-danger-light: rgba(239, 68, 68, 0.1);
    --qs-danger-bg: #fee2e2;
    --qs-success: #10b981;
    --qs-success-light: rgba(34, 197, 94, 0.1);
    --qs-success-bg: #d1fae5;
    --qs-warning: #f59e0b;
    --qs-warning-light: rgba(245, 158, 11, 0.1);
    --qs-warning-bg: #fde68a;

    /* --- Shadows --- */
    --qs-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
    --qs-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
    --qs-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --qs-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);

    /* --- Border Radius --- */
    --qs-radius-sm: 6px;
    --qs-radius-md: 8px;
    --qs-radius-lg: 12px;
    --qs-radius-xl: 16px;
    --qs-radius-full: 9999px;

    /* --- Spacing (reference scale) --- */
    --qs-space-xs: 0.25rem;
    --qs-space-sm: 0.5rem;
    --qs-space-md: 1rem;
    --qs-space-lg: 1.5rem;
    --qs-space-xl: 2rem;

    /* --- Typography --- */
    --qs-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --qs-font-xs: 0.75rem;
    --qs-font-sm: 0.875rem;
    --qs-font-md: 1rem;
    --qs-font-lg: 1.125rem;
    --qs-font-xl: 1.25rem;
    --qs-font-2xl: 1.5rem;

    /* --- Transitions --- */
    --qs-transition-fast: 150ms ease;
    --qs-transition-normal: 200ms ease;
    --qs-transition-slow: 300ms ease;
}

body.dark-mode {
    --qs-bg-primary: #1e293b;
    --qs-bg-secondary: #0f172a;
    --qs-bg-tertiary: #334155;
    --qs-bg-elevated: #1e293b;

    --qs-text-primary: #e2e8f0;
    --qs-text-secondary: #94a3b8;
    --qs-text-muted: #64748b;
    --qs-text-light: #475569;

    --qs-border-primary: #334155;
    --qs-border-secondary: #475569;
    --qs-border-light: #1e293b;

    --qs-accent: #3b82f6;
    --qs-accent-hover: #60a5fa;
    --qs-accent-light: rgba(59, 130, 246, 0.2);
    --qs-accent-lighter: rgba(59, 130, 246, 0.1);
    --qs-accent-dark: #1e3a8a;

    --qs-danger: #ef4444;
    --qs-danger-hover: #f87171;
    --qs-danger-light: rgba(239, 68, 68, 0.2);
    --qs-danger-bg: #7f1d1d;
    --qs-success: #10b981;
    --qs-success-light: rgba(34, 197, 94, 0.2);
    --qs-success-bg: #064e3b;
    --qs-warning: #f59e0b;
    --qs-warning-light: rgba(245, 158, 11, 0.2);
    --qs-warning-bg: #92400e;

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