/**
 * AEMonitor Dashboard - CSS Design System
 * Unified design tokens for consistent theming across the dashboard
 */

:root {
    /* Colors */

    /* Background Colors */
    /* Warm iron, taken from the emblem's metal rather than a cool blue-grey */
    --bg-primary: #100e0d;
    --bg-secondary: #181614;
    --bg-tertiary: #221f1c;
    --bg-elevated: #1c1a17;
    --bg-hover: rgba(255, 255, 255, 0.04);
    --bg-active: rgba(255, 255, 255, 0.08);

    /* Text Colors */
    --text-primary: #ece6df;
    --text-secondary: #a69d93;      /* 6.14:1 on bg-tertiary */
    --text-muted: #968e85;      /* 5.2:1 on bg-tertiary, the darkest surface it sits on */
    --text-inverse: #100e0d;

    /* Primary action colour: the ember of the emblem's flame */
    --primary: #f5734d;         /* text, links, borders: 5.81:1 on bg-tertiary */
    --fill-primary: #c53a1b;    /* button fills with white text: 5.26:1 */
    --fill-primary-hover: #b8321a;
    --primary-tint: rgba(245, 115, 77, 0.14);

    /* Fills that carry white text: each passes 4.5:1 against #fff */
    --fill-blue: #1f6feb;
    --fill-green: #1a7f37;
    --fill-red: #da3633;
    --fill-orange: #c2410c;
    --fill-purple: #7c3aed;
    --fill-muted: #6e7681;

    /* Focus ring: a light ember, 7:1 on every surface */
    --focus-ring: #ff8a66;

    /* Accent Colors - Primary Palette */
    --accent-blue: #58a6ff;
    --accent-blue-light: #79b8ff;
    --accent-blue-dark: #388bfd;
    --accent-green: #3fb950;
    --accent-green-light: #56d364;
    --accent-green-dark: #238636;
    --accent-red: #f85149;
    --accent-red-light: #ff7b72;
    --accent-red-dark: #da3633;
    --accent-gold: #d29922;
    --accent-gold-light: #e3b341;
    --accent-gold-dark: #9e6a03;
    --accent-yellow: #f0c14b;
    --accent-yellow-light: #f5d76e;

    /* Accent Colors - Extended */
    --accent-crimson: #dc143c;
    --accent-crimson-text: #ff5c7a;  /* crimson fails as text (3.05:1); this tint passes 5.12:1 on bg-tertiary */
    --accent-purple: #a855f7;
    --accent-purple-light: #c084fc;
    --accent-purple-dark: #7c3aed;
    --accent-orange: #f97316;
    --accent-orange-light: #fb923c;

    /* Border Colors */
    --border-color: #36312c;
    --border-light: #4a443e;
    --border-emphasis: #a19990;

    /* Status Colors */
    --status-online: var(--accent-green);
    --status-offline: var(--text-muted);
    --status-error: var(--accent-red);
    --status-warning: var(--accent-gold);
    --status-info: var(--accent-blue);   /* blue now marks state only: info, party */
    --status-success: var(--accent-green);

    /* Typography */

    /* Font Family */
    --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    --font-mono: 'SF Mono', 'Cascadia Code', 'Consolas', monospace;

    /* Font Sizes - Type Scale */
    --font-xs: 0.75rem;     /* 12px */
    --font-sm: 0.875rem;    /* 14px */
    --font-base: 1rem;      /* 16px */
    --font-lg: 1.125rem;    /* 18px */
    --font-xl: 1.25rem;     /* 20px */
    --font-2xl: 1.5rem;     /* 24px */
    --font-3xl: 1.875rem;   /* 30px */
    --font-4xl: 2.25rem;    /* 36px */

    /* Font Weights */
    --font-normal: 400;
    --font-medium: 500;
    --font-semibold: 600;
    --font-bold: 700;

    /* Line Heights */
    --leading-none: 1;
    --leading-tight: 1.25;
    --leading-snug: 1.375;
    --leading-normal: 1.5;
    --leading-relaxed: 1.625;

    /* Spacing */

    /* Spacing Scale */
    --space-0: 0;
    --space-1: 0.25rem;     /* 4px */
    --space-2: 0.5rem;      /* 8px */
    --space-3: 0.75rem;     /* 12px */
    --space-4: 1rem;        /* 16px */
    --space-5: 1.25rem;     /* 20px */
    --space-6: 1.5rem;      /* 24px */
    --space-8: 2rem;        /* 32px */
    --space-10: 2.5rem;     /* 40px */
    --space-12: 3rem;       /* 48px */
    --space-16: 4rem;       /* 64px */

    /* Legacy spacing (for backwards compatibility) */
    --spacing-xs: var(--space-1);
    --spacing-sm: var(--space-2);
    --spacing-md: var(--space-4);
    --spacing-lg: var(--space-6);
    --spacing-xl: var(--space-8);

    /* Named steps used by dashboard.css; they were never defined, so those paddings rendered as 0 */
    --space-xs: var(--space-1);
    --space-sm: var(--space-2);
    --space-md: var(--space-3);
    --space-lg: var(--space-4);
    --space-xl: var(--space-6);
    --space-2xl: var(--space-8);

    /* Borders */

    /* Border Radius */
    --radius-none: 0;
    --radius-sm: 4px;
    --radius-md: 6px;
    --radius-lg: 8px;
    --radius-xl: 12px;
    --radius-2xl: 16px;
    --radius-full: 9999px;

    /* Shadows */

    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.25);
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.35);
    --shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.4);
    --shadow-xl: 0 12px 24px rgba(0, 0, 0, 0.5);
    --shadow-2xl: 0 24px 48px rgba(0, 0, 0, 0.6);

    /* Glow Effects */
    --glow-blue: 0 0 20px rgba(88, 166, 255, 0.25);
    --glow-gold: 0 0 20px rgba(210, 153, 34, 0.25);
    --glow-green: 0 0 20px rgba(63, 185, 80, 0.25);
    --glow-purple: 0 0 20px rgba(168, 85, 247, 0.25);
    --glow-red: 0 0 20px rgba(248, 81, 73, 0.25);

    /* Transitions */

    --transition-fast: 0.1s ease;
    --transition-normal: 0.2s ease;
    --transition-slow: 0.3s ease;
    --transition-slower: 0.4s ease;

    /* Z-index layers */

    --z-negative: -1;
    --z-base: 0;
    --z-dropdown: 50;
    --z-sticky: 100;
    --z-overlay: 150;
    --z-modal: 200;
    --z-popover: 250;
    --z-toast: 300;
    --z-tooltip: 400;
    --z-max: 9999;

    /* Layout */

    --container-max: 1400px;
    --header-height: 60px;
    --tabs-height: 44px;
    --sidebar-width: 280px;

    /* Component tokens */

    /* Cards */
    --card-bg: var(--bg-secondary);
    --card-border: var(--border-color);
    --card-radius: var(--radius-lg);
    --card-padding: var(--space-4);
    --card-shadow: var(--shadow-sm);
    --card-hover-shadow: var(--shadow-md);
    --card-hover-border: var(--primary);

    /* Buttons */
    --btn-height-sm: 28px;
    --btn-height-md: 36px;
    --btn-height-lg: 44px;
    --btn-radius: var(--radius-md);
    --btn-font-size: var(--font-sm);
    --btn-font-weight: var(--font-medium);

    /* Inputs */
    --input-bg: var(--bg-primary);
    --input-border: var(--border-color);
    --input-radius: var(--radius-md);
    --input-height: 36px;
    --input-padding-x: var(--space-3);
    --input-font-size: var(--font-sm);

    /* Badges */
    --badge-radius: var(--radius-sm);
    --badge-font-size: 0.7rem;
    --badge-padding-x: 0.4rem;
    --badge-padding-y: 0.15rem;
}

/* Dark only, on purpose: the emblem is fire on dark iron and the game itself is played in dim light */

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
    :root {
        --transition-fast: 0s;
        --transition-normal: 0s;
        --transition-slow: 0s;
        --transition-slower: 0s;
    }
}