/* ═══════════════════════════════════════════════════════════════════════════
   STANDARD DESIGN SYSTEM
   A comprehensive, cohesive design language for the STANDARD platform
   ═══════════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════════
   1. COLOR SYSTEM
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
    /* ─────────────────────────────────────────────────────────────────────
       Primary Brand Colors
       ───────────────────────────────────────────────────────────────────── */
    --color-ember-50: #fff7ed;
    --color-ember-100: #ffedd5;
    --color-ember-200: #fed7aa;
    --color-ember-300: #fdba74;
    --color-ember-400: #fb923c;
    --color-ember-500: #ff4d00;        /* Primary ember */
    --color-ember-600: #ea580c;
    --color-ember-700: #c2410c;
    --color-ember-800: #9a3412;
    --color-ember-900: #7c2d12;
    
    /* Shorthand aliases */
    --color-primary: var(--color-ember-500);
    --color-primary-light: var(--color-ember-400);
    --color-primary-dark: var(--color-ember-600);
    
    /* ─────────────────────────────────────────────────────────────────────
       Accent Colors - Purple (Reviewer Theme)
       ───────────────────────────────────────────────────────────────────── */
    --color-purple-50: #faf5ff;
    --color-purple-100: #f3e8ff;
    --color-purple-200: #e9d5ff;
    --color-purple-300: #d8b4fe;
    --color-purple-400: #c084fc;
    --color-purple-500: #a855f7;       /* Primary purple */
    --color-purple-600: #9333ea;
    --color-purple-700: #7c3aed;
    --color-purple-800: #6b21a8;
    --color-purple-900: #581c87;
    
    /* Kahoot purple */
    --color-kahoot: #46178f;
    
    /* ─────────────────────────────────────────────────────────────────────
       Neutral Colors (Grays/Blacks)
       ───────────────────────────────────────────────────────────────────── */
    --color-neutral-0: #000000;        /* Pure black */
    --color-neutral-50: #0a0a0a;       /* Near black - bg darkest */
    --color-neutral-100: #0d0d0d;      /* Card backgrounds */
    --color-neutral-150: #111111;      /* Slightly elevated */
    --color-neutral-200: #1a1a1a;      /* Elevated surfaces */
    --color-neutral-300: #222222;      /* Borders/dividers */
    --color-neutral-400: #333333;      /* Strong borders */
    --color-neutral-500: #444444;      /* Muted elements */
    --color-neutral-600: #555555;      /* Secondary text */
    --color-neutral-700: #666666;      /* Muted text */
    --color-neutral-800: #888888;      /* Light muted text */
    --color-neutral-900: #aaaaaa;      /* Secondary text */
    --color-neutral-950: #cccccc;      /* Primary text on dark */
    --color-neutral-1000: #ffffff;     /* Pure white */
    
    /* ─────────────────────────────────────────────────────────────────────
       Semantic Colors
       ───────────────────────────────────────────────────────────────────── */
    /* Success */
    --color-success-50: #f0fdf4;
    --color-success-100: #dcfce7;
    --color-success-500: #22c55e;      /* Primary success */
    --color-success-600: #16a34a;
    --color-success-700: #15803d;
    
    /* Warning */
    --color-warning-50: #fefce8;
    --color-warning-100: #fef9c3;
    --color-warning-500: #eab308;      /* Primary warning */
    --color-warning-600: #ca8a04;
    
    /* Error */
    --color-error-50: #fef2f2;
    --color-error-100: #fee2e2;
    --color-error-500: #ef4444;        /* Primary error */
    --color-error-600: #dc2626;
    --color-error-700: #b91c1c;
    
    /* Info */
    --color-info-500: #3b82f6;
    
    /* ─────────────────────────────────────────────────────────────────────
       Special/Gamification Colors
       ───────────────────────────────────────────────────────────────────── */
    --color-gold: #ffd700;
    --color-gold-dark: #ff8c00;
    --color-silver: #c0c0c0;
    --color-bronze: #cd7f32;
    --color-platinum: #e5e4e2;
    --color-cyan: #00c2ff;
    --color-teal: #00c896;
    --color-mint: #00ff88;
    
    /* ─────────────────────────────────────────────────────────────────────
       Background & Surface Colors
       ───────────────────────────────────────────────────────────────────── */
    --bg-page: var(--color-neutral-0);
    --bg-card: var(--color-neutral-100);
    --bg-card-elevated: var(--color-neutral-150);
    --bg-surface: var(--color-neutral-200);
    --bg-input: var(--color-neutral-200);
    --bg-overlay: rgba(0, 0, 0, 0.8);
    --bg-overlay-light: rgba(0, 0, 0, 0.5);
    
    /* ─────────────────────────────────────────────────────────────────────
       Text Colors
       ───────────────────────────────────────────────────────────────────── */
    --text-primary: var(--color-neutral-1000);
    --text-secondary: rgba(255, 255, 255, 0.7);
    --text-muted: rgba(255, 255, 255, 0.5);
    --text-disabled: rgba(255, 255, 255, 0.3);
    --text-inverse: var(--color-neutral-0);
    
    /* ─────────────────────────────────────────────────────────────────────
       Border Colors
       ───────────────────────────────────────────────────────────────────── */
    --border-default: var(--color-neutral-300);
    --border-strong: var(--color-neutral-400);
    --border-subtle: rgba(255, 255, 255, 0.05);
    --border-focus: var(--color-primary);
    --border-error: var(--color-error-500);
    --border-success: var(--color-success-500);
    
    /* ═══════════════════════════════════════════════════════════════════
       2. TYPOGRAPHY SYSTEM
       ═══════════════════════════════════════════════════════════════════ */
    
    /* Font Families */
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-mono: 'SF Mono', 'Fira Code', 'Monaco', monospace;
    
    /* Font Sizes - Using modular scale (1.25 ratio) */
    --text-2xs: 0.625rem;      /* 10px */
    --text-xs: 0.6875rem;      /* 11px */
    --text-sm: 0.75rem;        /* 12px */
    --text-base: 0.8125rem;    /* 13px */
    --text-md: 0.875rem;       /* 14px */
    --text-lg: 0.9375rem;      /* 15px */
    --text-xl: 1rem;           /* 16px */
    --text-2xl: 1.125rem;      /* 18px */
    --text-3xl: 1.25rem;       /* 20px */
    --text-4xl: 1.5rem;        /* 24px */
    --text-5xl: 1.75rem;       /* 28px */
    --text-6xl: 2rem;          /* 32px */
    --text-7xl: 2.5rem;        /* 40px */
    --text-8xl: 3rem;          /* 48px */
    --text-9xl: 3.5rem;        /* 56px */
    
    /* Font Weights */
    --font-normal: 400;
    --font-medium: 500;
    --font-semibold: 600;
    --font-bold: 700;
    --font-extrabold: 800;
    --font-black: 900;
    
    /* Line Heights */
    --leading-none: 1;
    --leading-tight: 1.15;
    --leading-snug: 1.375;
    --leading-normal: 1.5;
    --leading-relaxed: 1.625;
    --leading-loose: 2;
    
    /* Letter Spacing */
    --tracking-tighter: -0.05em;
    --tracking-tight: -0.025em;
    --tracking-normal: 0;
    --tracking-wide: 0.025em;
    --tracking-wider: 0.05em;
    --tracking-widest: 0.1em;
    
    /* ═══════════════════════════════════════════════════════════════════
       3. SPACING SYSTEM
       ═══════════════════════════════════════════════════════════════════ */
    
    --space-0: 0;
    --space-px: 1px;
    --space-0-5: 0.125rem;     /* 2px */
    --space-1: 0.25rem;        /* 4px */
    --space-1-5: 0.375rem;     /* 6px */
    --space-2: 0.5rem;         /* 8px */
    --space-2-5: 0.625rem;     /* 10px */
    --space-3: 0.75rem;        /* 12px */
    --space-3-5: 0.875rem;     /* 14px */
    --space-4: 1rem;           /* 16px */
    --space-5: 1.25rem;        /* 20px */
    --space-6: 1.5rem;         /* 24px */
    --space-7: 1.75rem;        /* 28px */
    --space-8: 2rem;           /* 32px */
    --space-9: 2.25rem;        /* 36px */
    --space-10: 2.5rem;        /* 40px */
    --space-12: 3rem;          /* 48px */
    --space-14: 3.5rem;        /* 56px */
    --space-16: 4rem;          /* 64px */
    --space-20: 5rem;          /* 80px */
    --space-24: 6rem;          /* 96px */
    
    /* ═══════════════════════════════════════════════════════════════════
       4. BORDER RADIUS
       ═══════════════════════════════════════════════════════════════════ */
    
    --radius-none: 0;
    --radius-sm: 4px;
    --radius-md: 6px;
    --radius-lg: 8px;
    --radius-xl: 12px;
    --radius-2xl: 16px;
    --radius-3xl: 20px;
    --radius-full: 9999px;
    
    /* ═══════════════════════════════════════════════════════════════════
       5. SHADOWS & ELEVATION
       ═══════════════════════════════════════════════════════════════════ */
    
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.5);
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.5);
    --shadow-xl: 0 16px 32px rgba(0, 0, 0, 0.6);
    --shadow-2xl: 0 24px 48px rgba(0, 0, 0, 0.7);
    
    /* Glow shadows */
    --shadow-glow-ember: 0 0 20px rgba(255, 77, 0, 0.3);
    --shadow-glow-ember-lg: 0 0 40px rgba(255, 77, 0, 0.5);
    --shadow-glow-purple: 0 0 20px rgba(168, 85, 247, 0.3);
    --shadow-glow-purple-lg: 0 0 40px rgba(168, 85, 247, 0.5);
    --shadow-glow-success: 0 0 20px rgba(34, 197, 94, 0.3);
    --shadow-glow-gold: 0 0 20px rgba(255, 215, 0, 0.3);
    
    /* Card hover shadow */
    --shadow-card-hover: 4px 4px 0 var(--color-primary);
    --shadow-card-hover-purple: 4px 4px 0 var(--color-purple-500);
    
    /* ═══════════════════════════════════════════════════════════════════
       6. TRANSITIONS & ANIMATIONS
       ═══════════════════════════════════════════════════════════════════ */
    
    /* Transition Durations */
    --duration-instant: 0ms;
    --duration-fast: 100ms;
    --duration-normal: 200ms;
    --duration-slow: 300ms;
    --duration-slower: 500ms;
    
    /* Transition Timing Functions */
    --ease-linear: linear;
    --ease-in: cubic-bezier(0.4, 0, 1, 1);
    --ease-out: cubic-bezier(0, 0, 0.2, 1);
    --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
    --ease-bounce: cubic-bezier(0.16, 1, 0.3, 1);
    
    /* Standard Transitions */
    --transition-fast: all var(--duration-fast) var(--ease-out);
    --transition-normal: all var(--duration-normal) var(--ease-out);
    --transition-slow: all var(--duration-slow) var(--ease-bounce);
    
    /* ═══════════════════════════════════════════════════════════════════
       7. BREAKPOINTS (for reference in media queries)
       ═══════════════════════════════════════════════════════════════════ */
    /* 
       --breakpoint-sm: 640px;
       --breakpoint-md: 768px;
       --breakpoint-lg: 1024px;
       --breakpoint-xl: 1280px;
       --breakpoint-2xl: 1536px;
    */
    
    /* ═══════════════════════════════════════════════════════════════════
       8. Z-INDEX SCALE
       ═══════════════════════════════════════════════════════════════════ */
    
    --z-below: -1;
    --z-base: 0;
    --z-above: 1;
    --z-dropdown: 10;
    --z-sticky: 20;
    --z-fixed: 30;
    --z-modal-backdrop: 40;
    --z-modal: 50;
    --z-popover: 60;
    --z-tooltip: 70;
    --z-notification: 80;
    --z-cursor: 100;
    --z-max: 9999;
}

/* ═══════════════════════════════════════════════════════════════════════════
   COMPONENT TOKENS
   Semantic component-level tokens that reference the primitive tokens
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
    /* ─────────────────────────────────────────────────────────────────────
       Navigation
       ───────────────────────────────────────────────────────────────────── */
    --nav-height: 60px;
    --nav-bg: rgba(0, 0, 0, 0.85);
    --nav-border: var(--border-subtle);
    
    /* ─────────────────────────────────────────────────────────────────────
       Cards
       ───────────────────────────────────────────────────────────────────── */
    --card-bg: var(--bg-card);
    --card-border: var(--border-default);
    --card-border-hover: var(--color-primary);
    --card-radius: var(--radius-xl);
    --card-padding: var(--space-4);
    --card-padding-lg: var(--space-6);
    
    /* ─────────────────────────────────────────────────────────────────────
       Buttons
       ───────────────────────────────────────────────────────────────────── */
    --btn-padding-y: var(--space-3);
    --btn-padding-x: var(--space-5);
    --btn-padding-y-sm: var(--space-2);
    --btn-padding-x-sm: var(--space-3);
    --btn-padding-y-lg: var(--space-4);
    --btn-padding-x-lg: var(--space-8);
    --btn-font-size: var(--text-md);
    --btn-font-weight: var(--font-semibold);
    --btn-radius: var(--radius-md);
    
    /* ─────────────────────────────────────────────────────────────────────
       Inputs
       ───────────────────────────────────────────────────────────────────── */
    --input-padding-y: var(--space-3);
    --input-padding-x: var(--space-4);
    --input-font-size: var(--text-md);
    --input-radius: var(--radius-md);
    --input-border: var(--border-default);
    --input-bg: var(--bg-input);
    
    /* ─────────────────────────────────────────────────────────────────────
       Badges
       ───────────────────────────────────────────────────────────────────── */
    --badge-padding-y: var(--space-1);
    --badge-padding-x: var(--space-2-5);
    --badge-font-size: var(--text-2xs);
    --badge-font-weight: var(--font-bold);
    --badge-radius: var(--radius-sm);
    
    /* ─────────────────────────────────────────────────────────────────────
       Tools Bar
       ───────────────────────────────────────────────────────────────────── */
    --tools-bar-padding: var(--space-3) var(--space-4);
    --tools-bar-bg: var(--bg-card);
    --tools-bar-border: var(--border-default);
    
    /* ─────────────────────────────────────────────────────────────────────
       Bento Grid
       ───────────────────────────────────────────────────────────────────── */
    --bento-gap: var(--space-3);
    --bento-gap-lg: var(--space-4);
}

/* ═══════════════════════════════════════════════════════════════════════════
   UTILITY CLASSES
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────────────────
   Text Colors
   ───────────────────────────────────────────────────────────────────────── */
.text-primary { color: var(--text-primary) !important; }
.text-secondary { color: var(--text-secondary) !important; }
.text-muted { color: var(--text-muted) !important; }
.text-ember { color: var(--color-primary) !important; }
.text-purple { color: var(--color-purple-500) !important; }
.text-success { color: var(--color-success-500) !important; }
.text-error { color: var(--color-error-500) !important; }
.text-warning { color: var(--color-warning-500) !important; }
.text-gold { color: var(--color-gold) !important; }

/* ─────────────────────────────────────────────────────────────────────────
   Background Colors
   ───────────────────────────────────────────────────────────────────────── */
.bg-page { background: var(--bg-page) !important; }
.bg-card { background: var(--bg-card) !important; }
.bg-surface { background: var(--bg-surface) !important; }
.bg-ember { background: var(--color-primary) !important; }
.bg-purple { background: var(--color-purple-500) !important; }
.bg-success { background: var(--color-success-500) !important; }
.bg-error { background: var(--color-error-500) !important; }

/* ─────────────────────────────────────────────────────────────────────────
   Border Colors
   ───────────────────────────────────────────────────────────────────────── */
.border-default { border-color: var(--border-default) !important; }
.border-strong { border-color: var(--border-strong) !important; }
.border-ember { border-color: var(--color-primary) !important; }
.border-purple { border-color: var(--color-purple-500) !important; }
.border-success { border-color: var(--color-success-500) !important; }

/* ─────────────────────────────────────────────────────────────────────────
   Font Sizes
   ───────────────────────────────────────────────────────────────────────── */
.text-2xs { font-size: var(--text-2xs) !important; }
.text-xs { font-size: var(--text-xs) !important; }
.text-sm { font-size: var(--text-sm) !important; }
.text-base { font-size: var(--text-base) !important; }
.text-md { font-size: var(--text-md) !important; }
.text-lg { font-size: var(--text-lg) !important; }
.text-xl { font-size: var(--text-xl) !important; }
.text-2xl { font-size: var(--text-2xl) !important; }
.text-3xl { font-size: var(--text-3xl) !important; }
.text-4xl { font-size: var(--text-4xl) !important; }

/* ─────────────────────────────────────────────────────────────────────────
   Font Weights
   ───────────────────────────────────────────────────────────────────────── */
.font-normal { font-weight: var(--font-normal) !important; }
.font-medium { font-weight: var(--font-medium) !important; }
.font-semibold { font-weight: var(--font-semibold) !important; }
.font-bold { font-weight: var(--font-bold) !important; }
.font-extrabold { font-weight: var(--font-extrabold) !important; }
.font-black { font-weight: var(--font-black) !important; }

/* ─────────────────────────────────────────────────────────────────────────
   Spacing Utilities
   ───────────────────────────────────────────────────────────────────────── */
.gap-1 { gap: var(--space-1) !important; }
.gap-2 { gap: var(--space-2) !important; }
.gap-3 { gap: var(--space-3) !important; }
.gap-4 { gap: var(--space-4) !important; }
.gap-6 { gap: var(--space-6) !important; }
.gap-8 { gap: var(--space-8) !important; }

.p-2 { padding: var(--space-2) !important; }
.p-3 { padding: var(--space-3) !important; }
.p-4 { padding: var(--space-4) !important; }
.p-6 { padding: var(--space-6) !important; }

.px-2 { padding-left: var(--space-2) !important; padding-right: var(--space-2) !important; }
.px-3 { padding-left: var(--space-3) !important; padding-right: var(--space-3) !important; }
.px-4 { padding-left: var(--space-4) !important; padding-right: var(--space-4) !important; }

.py-2 { padding-top: var(--space-2) !important; padding-bottom: var(--space-2) !important; }
.py-3 { padding-top: var(--space-3) !important; padding-bottom: var(--space-3) !important; }
.py-4 { padding-top: var(--space-4) !important; padding-bottom: var(--space-4) !important; }

.m-0 { margin: 0 !important; }
.mt-2 { margin-top: var(--space-2) !important; }
.mt-3 { margin-top: var(--space-3) !important; }
.mt-4 { margin-top: var(--space-4) !important; }
.mb-2 { margin-bottom: var(--space-2) !important; }
.mb-3 { margin-bottom: var(--space-3) !important; }
.mb-4 { margin-bottom: var(--space-4) !important; }

/* ─────────────────────────────────────────────────────────────────────────
   Border Radius
   ───────────────────────────────────────────────────────────────────────── */
.rounded-none { border-radius: var(--radius-none) !important; }
.rounded-sm { border-radius: var(--radius-sm) !important; }
.rounded-md { border-radius: var(--radius-md) !important; }
.rounded-lg { border-radius: var(--radius-lg) !important; }
.rounded-xl { border-radius: var(--radius-xl) !important; }
.rounded-full { border-radius: var(--radius-full) !important; }

/* ─────────────────────────────────────────────────────────────────────────
   Display & Layout
   ───────────────────────────────────────────────────────────────────────── */
.flex { display: flex !important; }
.inline-flex { display: inline-flex !important; }
.grid { display: grid !important; }
.hidden { display: none !important; }

.flex-col { flex-direction: column !important; }
.flex-row { flex-direction: row !important; }
.flex-wrap { flex-wrap: wrap !important; }
.flex-1 { flex: 1 !important; }

.items-start { align-items: flex-start !important; }
.items-center { align-items: center !important; }
.items-end { align-items: flex-end !important; }

.justify-start { justify-content: flex-start !important; }
.justify-center { justify-content: center !important; }
.justify-end { justify-content: flex-end !important; }
.justify-between { justify-content: space-between !important; }

/* ─────────────────────────────────────────────────────────────────────────
   Transitions
   ───────────────────────────────────────────────────────────────────────── */
.transition-fast { transition: var(--transition-fast) !important; }
.transition-normal { transition: var(--transition-normal) !important; }
.transition-slow { transition: var(--transition-slow) !important; }

/* ═══════════════════════════════════════════════════════════════════════════
   STANDARD COMPONENT STYLES
   Reusable component classes that follow the design system
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────────────────
   Standard Card (Neobrutalist)
   ───────────────────────────────────────────────────────────────────────── */
.ds-card {
    background: var(--card-bg);
    border: 2px solid var(--card-border);
    border-radius: var(--card-radius);
    padding: var(--card-padding);
    transition: var(--transition-fast);
}

.ds-card:hover {
    transform: translate(-2px, -2px);
    box-shadow: var(--shadow-card-hover);
}

.ds-card-lg {
    padding: var(--card-padding-lg);
}

.ds-card-purple:hover {
    box-shadow: var(--shadow-card-hover-purple);
}

/* ─────────────────────────────────────────────────────────────────────────
   Standard Buttons
   ───────────────────────────────────────────────────────────────────────── */
.ds-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--btn-padding-y) var(--btn-padding-x);
    font-size: var(--btn-font-size);
    font-weight: var(--btn-font-weight);
    border-radius: var(--btn-radius);
    border: 1px solid transparent;
    cursor: pointer;
    text-decoration: none;
    transition: var(--transition-fast);
    white-space: nowrap;
}

.ds-btn-sm {
    padding: var(--btn-padding-y-sm) var(--btn-padding-x-sm);
    font-size: var(--text-sm);
}

.ds-btn-lg {
    padding: var(--btn-padding-y-lg) var(--btn-padding-x-lg);
    font-size: var(--text-lg);
}

.ds-btn-primary {
    background: var(--color-primary);
    color: var(--color-neutral-0);
    box-shadow: var(--shadow-glow-ember);
}

.ds-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-glow-ember-lg);
}

.ds-btn-secondary {
    background: var(--bg-surface);
    color: var(--text-primary);
    border-color: var(--border-default);
}

.ds-btn-secondary:hover {
    border-color: var(--color-primary);
    background: var(--bg-card-elevated);
}

.ds-btn-ghost {
    background: transparent;
    color: var(--text-secondary);
    border-color: var(--border-default);
}

.ds-btn-ghost:hover {
    color: var(--text-primary);
    border-color: var(--color-primary);
}

.ds-btn-purple {
    background: linear-gradient(135deg, var(--color-purple-500), var(--color-purple-700));
    color: var(--color-neutral-1000);
    box-shadow: var(--shadow-glow-purple);
}

.ds-btn-purple:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-glow-purple-lg);
}

/* ─────────────────────────────────────────────────────────────────────────
   Standard Inputs
   ───────────────────────────────────────────────────────────────────────── */
.ds-input {
    width: 100%;
    padding: var(--input-padding-y) var(--input-padding-x);
    font-size: var(--input-font-size);
    font-family: inherit;
    background: var(--input-bg);
    border: 1px solid var(--input-border);
    border-radius: var(--input-radius);
    color: var(--text-primary);
    transition: var(--transition-fast);
}

.ds-input:focus {
    outline: none;
    border-color: var(--border-focus);
    box-shadow: var(--shadow-glow-ember);
}

.ds-input::placeholder {
    color: var(--text-muted);
}

/* ─────────────────────────────────────────────────────────────────────────
   Standard Badges
   ───────────────────────────────────────────────────────────────────────── */
.ds-badge {
    display: inline-flex;
    align-items: center;
    padding: var(--badge-padding-y) var(--badge-padding-x);
    font-size: var(--badge-font-size);
    font-weight: var(--badge-font-weight);
    border-radius: var(--badge-radius);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
}

.ds-badge-ember {
    background: var(--color-primary);
    color: var(--color-neutral-0);
}

.ds-badge-purple {
    background: var(--color-purple-500);
    color: var(--color-neutral-1000);
}

.ds-badge-success {
    background: var(--color-success-500);
    color: var(--color-neutral-0);
}

.ds-badge-warning {
    background: var(--color-warning-500);
    color: var(--color-neutral-0);
}

.ds-badge-gold {
    background: linear-gradient(135deg, var(--color-gold), var(--color-gold-dark));
    color: var(--color-neutral-0);
}

.ds-badge-muted {
    background: var(--color-neutral-500);
    color: var(--text-muted);
}

/* ─────────────────────────────────────────────────────────────────────────
   Score Display Components
   ───────────────────────────────────────────────────────────────────────── */
.ds-score {
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: var(--font-black);
    border-radius: var(--radius-lg);
}

.ds-score-sm {
    width: 32px;
    height: 32px;
    font-size: var(--text-md);
}

.ds-score-md {
    width: 48px;
    height: 48px;
    font-size: var(--text-2xl);
}

.ds-score-lg {
    width: 64px;
    height: 64px;
    font-size: var(--text-4xl);
}

.ds-score-excellent {
    background: var(--color-success-500);
    color: var(--color-neutral-0);
}

.ds-score-good {
    background: var(--color-primary);
    color: var(--color-neutral-0);
}

.ds-score-average {
    background: var(--color-warning-500);
    color: var(--color-neutral-0);
}

.ds-score-poor {
    background: var(--color-neutral-400);
    color: var(--text-muted);
}

/* ─────────────────────────────────────────────────────────────────────────
   Panel Header
   ───────────────────────────────────────────────────────────────────────── */
.ds-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: var(--space-3);
    margin-bottom: var(--space-4);
    border-bottom: 1px solid var(--border-default);
}

.ds-panel-title {
    font-size: var(--text-xs);
    font-weight: var(--font-bold);
    letter-spacing: var(--tracking-widest);
    text-transform: uppercase;
    color: var(--text-muted);
}

/* ─────────────────────────────────────────────────────────────────────────
   Tools Bar
   ───────────────────────────────────────────────────────────────────────── */
.ds-tools-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--tools-bar-padding);
    background: var(--tools-bar-bg);
    border: 2px solid var(--tools-bar-border);
    border-radius: var(--radius-xl);
    margin-bottom: var(--space-4);
}

.ds-tool-btn {
    display: flex;
    align-items: center;
    gap: var(--space-1-5);
    padding: var(--space-2) var(--space-3);
    background: var(--bg-card-elevated);
    border: 2px solid var(--border-default);
    border-radius: var(--radius-lg);
    color: var(--text-primary);
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    text-decoration: none;
    transition: var(--transition-fast);
}

.ds-tool-btn:hover {
    border-color: var(--color-primary);
    transform: translateY(-2px);
    box-shadow: 0 4px 0 rgba(255, 77, 0, 0.3);
}

/* ─────────────────────────────────────────────────────────────────────────
   Live Indicators
   ───────────────────────────────────────────────────────────────────────── */
.ds-live-dot {
    width: 8px;
    height: 8px;
    background: var(--color-primary);
    border-radius: var(--radius-full);
    animation: ds-pulse 1.5s ease-in-out infinite;
    box-shadow: 0 0 10px var(--color-primary);
}

.ds-live-dot-lg {
    width: 12px;
    height: 12px;
}

@keyframes ds-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.6; transform: scale(1.3); }
}

/* ─────────────────────────────────────────────────────────────────────────
   Notification Badge
   ───────────────────────────────────────────────────────────────────────── */
.ds-notification-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    background: var(--color-error-500);
    color: var(--color-neutral-1000);
    font-size: var(--text-2xs);
    font-weight: var(--font-bold);
    min-width: 18px;
    height: 18px;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 var(--space-1);
    animation: ds-pulse 2s ease infinite;
}

/* ─────────────────────────────────────────────────────────────────────────
   Progress Bars
   ───────────────────────────────────────────────────────────────────────── */
.ds-progress {
    height: 8px;
    background: var(--color-neutral-300);
    border-radius: var(--radius-full);
    overflow: hidden;
}

.ds-progress-fill {
    height: 100%;
    border-radius: var(--radius-full);
    background: linear-gradient(90deg, var(--color-primary), var(--color-ember-400));
    transition: width var(--duration-slow) var(--ease-out);
}

.ds-progress-success .ds-progress-fill {
    background: linear-gradient(90deg, var(--color-success-500), var(--color-success-600));
}

.ds-progress-purple .ds-progress-fill {
    background: linear-gradient(90deg, var(--color-purple-500), var(--color-purple-700));
}

/* ─────────────────────────────────────────────────────────────────────────
   Toast Notifications
   ───────────────────────────────────────────────────────────────────────── */
.ds-toast {
    position: fixed;
    bottom: var(--space-5);
    right: var(--space-5);
    padding: var(--space-3) var(--space-6);
    border-radius: var(--radius-lg);
    font-size: var(--text-md);
    font-weight: var(--font-medium);
    z-index: var(--z-notification);
    animation: ds-toast-in 0.3s ease, ds-toast-out 0.3s ease 2.7s forwards;
}

.ds-toast-success {
    background: var(--color-success-500);
    color: var(--color-neutral-0);
}

.ds-toast-error {
    background: var(--color-error-500);
    color: var(--color-neutral-1000);
}

.ds-toast-info {
    background: var(--color-neutral-400);
    color: var(--color-neutral-1000);
}

@keyframes ds-toast-in {
    from { transform: translateY(20px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

@keyframes ds-toast-out {
    from { transform: translateY(0); opacity: 1; }
    to { transform: translateY(20px); opacity: 0; }
}

/* ─────────────────────────────────────────────────────────────────────────
   Modal Overlay
   ───────────────────────────────────────────────────────────────────────── */
.ds-modal-overlay {
    position: fixed;
    inset: 0;
    background: var(--bg-overlay);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: var(--z-modal);
    animation: ds-fade-in 0.2s ease;
}

.ds-modal {
    background: var(--bg-card-elevated);
    border: 2px solid var(--color-primary);
    border-radius: var(--radius-2xl);
    width: 90%;
    max-width: 480px;
    max-height: 90vh;
    overflow-y: auto;
    animation: ds-slide-up 0.3s ease;
}

.ds-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-5);
    border-bottom: 1px solid var(--border-default);
}

.ds-modal-body {
    padding: var(--space-5);
}

.ds-modal-footer {
    display: flex;
    gap: var(--space-3);
    padding: var(--space-5);
    border-top: 1px solid var(--border-default);
}

@keyframes ds-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes ds-slide-up {
    from { transform: translateY(20px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   RESPONSIVE HELPERS
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
    :root {
        --card-padding: var(--space-3);
        --card-padding-lg: var(--space-4);
        --bento-gap: var(--space-2);
    }
}

@media (max-width: 640px) {
    :root {
        --text-9xl: 2.5rem;
        --text-8xl: 2rem;
        --text-7xl: 1.75rem;
    }
}