/* ============================================
   BODY RESET NOW — DESIGN TOKENS
   Modern slate/amber palette with Inter typography
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

:root {
    /* Colors — Primary (dark slate) */
    --color-primary: #1e293b;
    --color-primary-light: #334155;
    --color-primary-dark: #0f172a;
    --color-primary-subtle: rgba(30, 41, 59, 0.06);

    /* Colors — Accent (amber) */
    --color-accent: #d97706;
    --color-accent-light: #f59e0b;

    /* Colors — Background (cool slate) */
    --color-warm: #e2e8f0;
    --color-bg: #f8fafc;
    --color-bg-alt: #f1f5f9;
    --color-bg-elevated: #FFFFFF;

    /* Colors — Text (slate scale) */
    --color-text: #0f172a;
    --color-text-light: #475569;
    --color-text-muted: #94a3b8;

    /* Colors — Utility */
    --color-border: #e2e8f0;
    --color-border-light: #f1f5f9;
    --color-white: #FFFFFF;
    --color-red-soft: #dc2626;
    --color-green-soft: #16a34a;
    --color-yellow-soft: #d97706;
    --color-blue-soft: #2563eb;
    --color-ai: #7C3AED;
    --color-ai-light: #A78BFA;
    --color-ai-bg: rgba(124, 58, 237, 0.05);

    /* Status Colors (kept semantic, slightly refreshed) */
    --color-optimal: #16a34a;
    --color-optimal-bg: rgba(22, 163, 74, 0.07);
    --color-optimal-border: rgba(22, 163, 74, 0.18);
    --color-suboptimal: #d97706;
    --color-suboptimal-bg: rgba(217, 119, 6, 0.07);
    --color-suboptimal-border: rgba(217, 119, 6, 0.18);
    --color-critical: #dc2626;
    --color-critical-bg: rgba(220, 38, 38, 0.07);
    --color-critical-border: rgba(220, 38, 38, 0.18);

    /* Typography — single font family (Inter) */
    --font-heading: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

    /* Spacing (slightly more generous) */
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 16px;
    --space-lg: 24px;
    --space-xl: 36px;
    --space-2xl: 56px;
    --space-3xl: 80px;

    /* Border Radius (modern: bigger for cards, tighter for inputs) */
    --radius-xs: 6px;
    --radius-sm: 10px;
    --radius-md: 14px;
    --radius-lg: 20px;
    --radius-xl: 28px;
    --radius-full: 9999px;

    /* Shadows (layered, more refined) */
    --shadow-xs: 0 1px 2px rgba(0,0,0,0.04);
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.03);
    --shadow-md: 0 4px 16px rgba(0,0,0,0.06), 0 1px 3px rgba(0,0,0,0.04);
    --shadow-lg: 0 8px 32px rgba(0,0,0,0.08), 0 2px 6px rgba(0,0,0,0.03);
    --shadow-xl: 0 16px 48px rgba(0,0,0,0.10), 0 4px 12px rgba(0,0,0,0.04);
    --shadow-card: 0 1px 3px rgba(0,0,0,0.04), 0 0 0 1px rgba(0,0,0,0.03);
    --shadow-card-hover: 0 8px 24px rgba(0,0,0,0.08), 0 0 0 1px rgba(0,0,0,0.04);

    /* Transitions */
    --transition-fast: 150ms ease;
    --transition-normal: 250ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 400ms cubic-bezier(0.4, 0, 0.2, 1);

    /* Layout */
    --header-height: 64px;
    --sidebar-width: 280px;
    --content-max-width: 1150px;
}