/* ============================================================
   SSQ Admin Design Tokens
   Single source of truth for all admin UI colours, spacing,
   typography, shadows, and z-index. Loaded by every admin page.
   ============================================================ */

:root {
    /* ===== Colours: Primary ===== */
    --ssq-admin-primary: #3b82f6;
    --ssq-admin-primary-hover: #2563eb;
    --ssq-admin-primary-light: #eff6ff;
    --ssq-admin-primary-rgb: 59, 130, 246;

    /* ===== Colours: Semantic ===== */
    --ssq-admin-success: #059669;
    --ssq-admin-success-light: #ecfdf5;
    --ssq-admin-success-hover: #047857;
    --ssq-admin-error: #dc2626;
    --ssq-admin-error-light: #fef2f2;
    --ssq-admin-error-hover: #b91c1c;
    --ssq-admin-warning: #d97706;
    --ssq-admin-warning-light: #fffbeb;
    --ssq-admin-info: #2563eb;
    --ssq-admin-info-light: #dbeafe;

    /* ===== Colours: Brand ===== */
    --ssq-admin-purple: rgb(147, 112, 219);
    --ssq-admin-purple-hover: rgb(127, 92, 199);
    --ssq-admin-purple-light: rgba(147, 112, 219, 0.1);
    --ssq-admin-purple-rgb: 147, 112, 219;

    /* ===== Colours: Text ===== */
    --ssq-admin-text: #111827;
    --ssq-admin-text-mid: #374151;
    --ssq-admin-text-sub: #64748b;
    --ssq-admin-text-muted: #9ca3af;

    /* ===== Colours: Backgrounds ===== */
    --ssq-admin-bg: #f3f4f6;
    --ssq-admin-bg-gradient-start: #f5f7fa;
    --ssq-admin-bg-gradient-end: #c3cfe2;
    --ssq-admin-card-bg: #ffffff;

    /* ===== Colours: Borders ===== */
    --ssq-admin-border: #e2e8f0;
    --ssq-admin-border-light: #f3f4f6;

    /* ===== Spacing Scale (8px base) ===== */
    --ssq-admin-space-1: 4px;
    --ssq-admin-space-2: 8px;
    --ssq-admin-space-3: 12px;
    --ssq-admin-space-4: 16px;
    --ssq-admin-space-5: 20px;
    --ssq-admin-space-6: 24px;
    --ssq-admin-space-8: 32px;
    --ssq-admin-space-10: 40px;
    --ssq-admin-space-12: 48px;

    /* ===== Border Radius Scale ===== */
    --ssq-admin-radius-sm: 4px;
    --ssq-admin-radius-md: 6px;
    --ssq-admin-radius-lg: 8px;
    --ssq-admin-radius-xl: 12px;
    --ssq-admin-radius-2xl: 14px;
    --ssq-admin-radius-3xl: 16px;
    --ssq-admin-radius-pill: 40px;

    /* ===== Shadows ===== */
    --ssq-admin-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.06);
    --ssq-admin-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    --ssq-admin-shadow-hover: 0 8px 30px rgba(0, 0, 0, 0.12);
    --ssq-admin-shadow-modal: 0 25px 50px rgba(0, 0, 0, 0.25);

    /* ===== Focus ===== */
    --ssq-admin-focus-ring: 0 0 0 3px rgba(59, 130, 246, 0.25);

    /* ===== Transitions ===== */
    --ssq-admin-transition-fast: 150ms ease;
    --ssq-admin-transition: 200ms ease;
    --ssq-admin-transition-slow: 300ms ease;

    /* ===== Typography ===== */
    --ssq-admin-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --ssq-admin-font-mono: 'SF Mono', 'Consolas', 'Monaco', monospace;
    --ssq-admin-text-xs: 0.75rem;
    --ssq-admin-text-sm: 0.8rem;
    --ssq-admin-text-base: 0.875rem;
    --ssq-admin-text-md: 0.9rem;
    --ssq-admin-text-lg: 1rem;
    --ssq-admin-text-xl: 1.125rem;
    --ssq-admin-text-2xl: 1.25rem;
    --ssq-admin-text-3xl: 1.5rem;

    /* ===== Z-Index Scale ===== */
    --ssq-admin-z-dropdown: 100;
    --ssq-admin-z-sticky: 500;
    --ssq-admin-z-modal: 10000;
    --ssq-admin-z-tooltip: 10001;
    --ssq-admin-z-toast: 10002;

    /* ===== Overlay ===== */
    --ssq-admin-overlay: rgba(0, 0, 0, 0.5);
    --ssq-admin-overlay-heavy: rgba(0, 0, 0, 0.75);

    /* ===== Pg212-specific (parameter tables) ===== */
    --ssq-admin-cm1: #6366f1;
    --ssq-admin-cm2: #0d9488;
    --ssq-admin-cm5: #8b5cf6;
    --ssq-admin-cm-config: #64748b;
    --ssq-admin-badge-bg: #f1f5f9;
    --ssq-admin-badge-text: #475569;
    --ssq-admin-sidebar-width: 260px;
    --ssq-admin-btn-padding: 0.4rem 0.9rem;
    --ssq-admin-btn-font: 0.8rem;
}