:root {
    /* Background colors */
    --lex-bg-primary: #0f1117;
    --lex-bg-secondary: #1a1d23;
    --lex-bg-tertiary: #22262e;
    --lex-bg-elevated: #282c34;
    --lex-bg-overlay: rgba(0, 0, 0, 0.6);

    /* Border colors */
    --lex-border: #2d3139;
    --lex-border-focus: #10b981;
    --lex-border-hover: #3d4149;

    /* Text colors */
    --lex-text-primary: #e2e8f0;
    --lex-text-secondary: #94a3b8;
    --lex-text-tertiary: #64748b;
    --lex-text-inverse: #0f1117;
    --lex-text-link: #34d399;

    /* Primary (Emerald) */
    --lex-primary-50: #ecfdf5;
    --lex-primary-100: #d1fae5;
    --lex-primary-200: #a7f3d0;
    --lex-primary-300: #6ee7b7;
    --lex-primary-400: #34d399;
    --lex-primary-500: #10b981;
    --lex-primary-600: #059669;
    --lex-primary-700: #047857;
    --lex-primary-800: #065f46;
    --lex-primary-900: #064e3b;

    /* Accent */
    --lex-accent: #34d399;
    --lex-accent-hover: #6ee7b7;
    --lex-accent-muted: rgba(52, 211, 153, 0.15);

    /* Semantic colors */
    --lex-success: #22c55e;
    --lex-success-bg: rgba(34, 197, 94, 0.12);
    --lex-warning: #f59e0b;
    --lex-warning-bg: rgba(245, 158, 11, 0.12);
    --lex-danger: #ef4444;
    --lex-danger-bg: rgba(239, 68, 68, 0.12);
    --lex-info: #3b82f6;
    --lex-info-bg: rgba(59, 130, 246, 0.12);

    /* Semantic color scales — required by the component system (LexButton etc.) */
    --lex-secondary-400: #94a3b8;
    --lex-secondary-500: #64748b;
    --lex-secondary-600: #475569;
    --lex-accent-400: #6ee7b7;
    --lex-accent-500: #34d399;
    --lex-accent-600: #10b981;
    --lex-success-400: #4ade80;
    --lex-success-500: #22c55e;
    --lex-success-600: #16a34a;
    --lex-warning-400: #fbbf24;
    --lex-warning-500: #f59e0b;
    --lex-warning-600: #d97706;
    --lex-danger-400: #f87171;
    --lex-danger-500: #ef4444;
    --lex-danger-600: #dc2626;
    --lex-info-400: #60a5fa;
    --lex-info-500: #3b82f6;
    --lex-info-600: #2563eb;

    /* RGB channel values — used in rgba() throughout the canvas/hex theme.
       Change these values to retheme all panels, glows, and surfaces at once. */
    --lex-glow-rgb: 46, 232, 165;          /* #2ee8a5 — emerald glow, accents, borders */
    --lex-surface-rgb: 11, 20, 32;         /* #0b1420 — sidebar, topbar, card surfaces  */
    --lex-surface-deep-rgb: 13, 24, 34;    /* #0d1822 — card gradient deep end          */
    --lex-base-rgb: 7, 13, 20;             /* #070d14 — body / page base background     */
    --lex-canvas-danger-rgb: 255, 74, 94;  /* #ff4a5e — danger icon buttons             */
    --lex-canvas-warning-rgb: 240, 160, 48;/* #f0a030 — warning icon buttons            */

    /* Spacing (4px base) */
    --lex-space-1: 0.25rem;
    --lex-space-2: 0.5rem;
    --lex-space-3: 0.75rem;
    --lex-space-4: 1rem;
    --lex-space-5: 1.25rem;
    --lex-space-6: 1.5rem;
    --lex-space-8: 2rem;
    --lex-space-10: 2.5rem;
    --lex-space-12: 3rem;
    --lex-space-16: 4rem;

    /* Typography */
    --lex-font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --lex-font-mono: 'JetBrains Mono', 'Cascadia Code', 'Fira Code', monospace;
    --lex-font-size-xs: 0.75rem;
    --lex-font-size-sm: 0.875rem;
    --lex-font-size-base: 1rem;
    --lex-font-size-lg: 1.125rem;
    --lex-font-size-xl: 1.25rem;
    --lex-font-size-2xl: 1.5rem;
    --lex-font-size-3xl: 1.875rem;
    --lex-font-size-4xl: 2.25rem;
    --lex-line-height-tight: 1.25;
    --lex-line-height-normal: 1.5;
    --lex-line-height-relaxed: 1.75;

    /* Border radius */
    --lex-radius-sm: 0.25rem;
    --lex-radius-md: 0.375rem;
    --lex-radius-lg: 0.5rem;
    --lex-radius-xl: 0.75rem;
    --lex-radius-2xl: 1rem;
    --lex-radius-full: 9999px;

    /* Shadows (emerald-tinted) */
    --lex-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --lex-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -2px rgba(0, 0, 0, 0.3);
    --lex-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -4px rgba(0, 0, 0, 0.4);
    --lex-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.5), 0 8px 10px -6px rgba(0, 0, 0, 0.4);
    --lex-shadow-glow: 0 0 20px rgba(16, 185, 129, 0.15);
    --lex-shadow-glow-strong: 0 0 30px rgba(16, 185, 129, 0.25);

    /* Transitions */
    --lex-transition-fast: 100ms ease-in-out;
    --lex-transition-base: 150ms ease-in-out;
    --lex-transition-slow: 300ms ease-in-out;

    /* Layout */
    --lex-sidebar-width: 260px;
    --lex-sidebar-collapsed-width: 64px;
    --lex-topbar-height: 56px;
    --lex-content-max-width: 1440px;
}

/* Base styles */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    margin: 0;
    padding: 0;
    font-family: var(--lex-font-family);
    font-size: var(--lex-font-size-base);
    line-height: var(--lex-line-height-normal);
    color: var(--lex-text-primary);
    background-color: var(--lex-bg-primary);
}

/* Scrollbar styling */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: var(--lex-bg-secondary);
}

::-webkit-scrollbar-thumb {
    background: var(--lex-border);
    border-radius: var(--lex-radius-full);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--lex-border-hover);
}

/* Focus ring */
:focus-visible {
    outline: 2px solid var(--lex-primary-500);
    outline-offset: 2px;
}

/* Selection */
::selection {
    background-color: var(--lex-accent-muted);
    color: var(--lex-accent);
}

/* Links */
a {
    color: var(--lex-text-link);
    text-decoration: none;
    transition: color var(--lex-transition-fast);
}

a:hover {
    color: var(--lex-accent-hover);
}

/* Utility classes */
.lex-text-primary { color: var(--lex-text-primary); }
.lex-text-secondary { color: var(--lex-text-secondary); }
.lex-text-tertiary { color: var(--lex-text-tertiary); }
.lex-text-accent { color: var(--lex-accent); }
.lex-text-success { color: var(--lex-success); }
.lex-text-warning { color: var(--lex-warning); }
.lex-text-danger { color: var(--lex-danger); }
.lex-text-info { color: var(--lex-info); }

.lex-bg-primary { background-color: var(--lex-bg-primary); }
.lex-bg-secondary { background-color: var(--lex-bg-secondary); }
.lex-bg-tertiary { background-color: var(--lex-bg-tertiary); }

.lex-border { border: 1px solid var(--lex-border); }
.lex-rounded-sm { border-radius: var(--lex-radius-sm); }
.lex-rounded-md { border-radius: var(--lex-radius-md); }
.lex-rounded-lg { border-radius: var(--lex-radius-lg); }
.lex-rounded-xl { border-radius: var(--lex-radius-xl); }

.lex-shadow-sm { box-shadow: var(--lex-shadow-sm); }
.lex-shadow-md { box-shadow: var(--lex-shadow-md); }
.lex-shadow-lg { box-shadow: var(--lex-shadow-lg); }
.lex-shadow-glow { box-shadow: var(--lex-shadow-glow); }

.lex-truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lex-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* ── Global button system ─────────────────────────────────────── */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: var(--lex-radius-lg);
    font-family: 'DM Sans', var(--lex-font-family);
    font-size: var(--lex-font-size-sm);
    font-weight: 500;
    line-height: 1.4;
    cursor: pointer;
    transition: all var(--lex-transition-base);
    border: none;
    white-space: nowrap;
    text-decoration: none;
}

.btn:disabled,
.btn[disabled] {
    opacity: 0.45;
    cursor: not-allowed;
    pointer-events: none;
}

.btn-primary {
    background: var(--lex-accent);
    color: #050b11;
    box-shadow: 0 4px 16px rgba(46, 232, 165, 0.2);
}

.btn-primary:hover {
    box-shadow: 0 6px 24px rgba(46, 232, 165, 0.35);
    transform: translateY(-1px);
}

.btn-ghost {
    background: transparent;
    color: var(--lex-text-secondary);
    border: 1px solid var(--lex-border);
}

.btn-ghost:hover {
    border-color: var(--lex-border-hover);
    color: var(--lex-text-primary);
    background: rgba(255, 255, 255, 0.03);
}

.btn-danger {
    background: var(--lex-danger-bg);
    color: var(--lex-danger);
    border: 1px solid rgba(239, 68, 68, 0.2);
}

.btn-danger:hover {
    background: rgba(239, 68, 68, 0.18);
    border-color: rgba(239, 68, 68, 0.35);
}

.btn-sm {
    padding: 5px 10px;
    font-size: var(--lex-font-size-xs);
}

.btn i {
    font-size: 1em;
    line-height: 1;
}