/* AgentRank Design System — tokens v3 (premium internal) */
:root {
    --ar-font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --ar-font-mono: ui-monospace, "Cascadia Code", "Segoe UI Mono", monospace;

    --ar-weight-regular: 400;
    --ar-weight-medium: 500;
    --ar-weight-semibold: 600;
    --ar-weight-bold: 700;
    --ar-weight-extrabold: 800;

    --ar-space-1: 4px;
    --ar-space-2: 8px;
    --ar-space-3: 12px;
    --ar-space-4: 16px;
    --ar-space-5: 20px;
    --ar-space-6: 24px;
    --ar-space-8: 32px;
    --ar-space-10: 40px;
    --ar-space-12: 48px;
    --ar-space-16: 64px;

    --ar-radius-sm: 8px;
    --ar-radius-md: 12px;
    --ar-radius-lg: 16px;
    --ar-radius-xl: 24px;
    --ar-radius-full: 999px;

    --ar-shadow-xs: 0 1px 2px rgba(5, 11, 20, 0.04);
    --ar-shadow-sm: 0 4px 20px rgba(5, 11, 20, 0.06);
    --ar-shadow-md: 0 12px 40px rgba(5, 11, 20, 0.08);
    --ar-shadow-lg: 0 24px 56px rgba(5, 11, 20, 0.12);
    --ar-shadow-card: 0 1px 3px rgba(5, 11, 20, 0.04), 0 8px 24px rgba(5, 11, 20, 0.06);
    --ar-shadow-glow: 0 0 0 1px rgba(37, 191, 211, 0.12), 0 8px 28px rgba(37, 99, 235, 0.14);

    --ar-sidebar-width: 272px;
    --ar-topbar-height: 68px;
    --ar-content-max: 1420px;

    /* Brand palette */
    --ar-navy-950: #050b14;
    --ar-navy-900: #07111f;
    --ar-navy-850: #0b1628;
    --ar-navy-800: #111c31;
    --ar-charcoal: #202326;

    --ar-cyan-500: #25bfd3;
    --ar-cyan-400: #38d6e8;
    --ar-blue-600: #2563eb;
    --ar-blue-700: #1d4ed8;
    --ar-blue-500: #3b82f6;
    --ar-teal-400: #2dd4bf;
    --ar-violet-500: #8b5cf6;

    /* Semantic surfaces */
    --ar-bg-app: #f4f7fb;
    --ar-bg-soft: #f8fafc;
    --ar-bg-surface: #ffffff;
    --ar-bg-surface-soft: #f9fbff;
    --ar-bg-elevated: #ffffff;
    --ar-bg-sidebar: var(--ar-navy-950);
    --ar-bg-sidebar-hover: rgba(255, 255, 255, 0.06);
    --ar-bg-sidebar-active: rgba(37, 191, 211, 0.14);

    --ar-border: #e2e8f0;
    --ar-border-strong: #cbd5e1;

    --ar-text-primary: #0f172a;
    --ar-text-secondary: #475569;
    --ar-text-muted: #64748b;
    --ar-text-muted-light: #94a3b8;

    --ar-brand: var(--ar-blue-600);
    --ar-brand-hover: var(--ar-blue-700);
    --ar-brand-subtle: rgba(37, 99, 235, 0.08);
    --ar-brand-gradient: linear-gradient(135deg, var(--ar-cyan-500) 0%, var(--ar-blue-600) 100%);
    --ar-hero-gradient: linear-gradient(135deg, var(--ar-navy-950) 0%, var(--ar-navy-850) 45%, var(--ar-blue-700) 100%);

    --ar-score-excellent: #10b981;
    --ar-score-good: #2563eb;
    --ar-score-fair: #f59e0b;
    --ar-score-poor: #f97316;
    --ar-score-critical: #dc2626;
    --ar-score-na: #94a3b8;

    --ar-success: #10b981;
    --ar-warning: #f59e0b;
    --ar-danger: #ef4444;
    --ar-critical: #dc2626;
    --ar-info: #2563eb;

    /* Legacy aliases */
    --ar-bg: var(--ar-bg-app);
    --ar-surface: var(--ar-bg-surface);
    --ar-text: var(--ar-text-primary);
    --ar-muted: var(--ar-text-muted);
    --ar-primary: var(--ar-brand);
}

[data-theme="dark"] {
    --ar-bg-app: #050b14;
    --ar-bg-soft: #07111f;
    --ar-bg-surface: #0f172a;
    --ar-bg-surface-soft: #111827;
    --ar-bg-elevated: #1e293b;
    --ar-bg-sidebar: #020617;
    --ar-border: #1e293b;
    --ar-border-strong: #334155;
    --ar-text-primary: #f1f5f9;
    --ar-text-secondary: #94a3b8;
    --ar-text-muted: #64748b;
    --ar-text-muted-light: #475569;
    --ar-brand: #3b82f6;
    --ar-brand-hover: #60a5fa;
    --ar-brand-subtle: rgba(59, 130, 246, 0.12);
    --ar-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.25);
    --ar-shadow-sm: 0 4px 20px rgba(0, 0, 0, 0.3);
    --ar-shadow-md: 0 12px 40px rgba(0, 0, 0, 0.35);
    --ar-shadow-card: 0 1px 3px rgba(0, 0, 0, 0.2), 0 8px 24px rgba(0, 0, 0, 0.25);
    --ar-shadow-glow: 0 0 0 1px rgba(59, 130, 246, 0.2), 0 8px 28px rgba(0, 0, 0, 0.35);
}