:root {
    /* Typography */
    --font-display: 'Outfit', system-ui, sans-serif;
    --font-body: 'Plus Jakarta Sans', system-ui, sans-serif;

    /* Brand Colors - Teal primary */
    --color-brand-50: #ecfeff;
    --color-brand-100: #cffafe;
    --color-brand-200: #a5f3fc;
    --color-brand-300: #67e8f9;
    --color-brand-400: #22d3ee;
    --color-brand-500: #06b6d4;
    --color-brand-600: #0891b2;
    --color-brand-700: #0e7490;
    --color-brand-800: #155e75;
    --color-brand-900: #164e63;

    /* Accent - Warm orange for contrast */
    --color-accent-50: #fff7ed;
    --color-accent-100: #ffedd5;
    --color-accent-200: #fed7aa;
    --color-accent-300: #fdba74;
    --color-accent-400: #fb923c;
    --color-accent-500: #f97316;
    --color-accent-600: #ea580c;
    --color-accent-700: #c2410c;
    --color-accent-800: #9a3412;
    --color-accent-900: #7c2d12;

    /* Status Colors - More distinctive */
    --color-success: #10b981;
    --color-success-light: #d1fae5;
    --color-warning: #f59e0b;
    --color-warning-light: #fef3c7;
    --color-error: #ef4444;
    --color-error-light: #fee2e2;
    --color-info: #3b82f6;
    --color-info-light: #dbeafe;

    /* Surfaces - Slate neutrals */
    --surface-primary: #ffffff;
    --surface-secondary: #f8fafc;
    --surface-tertiary: #f1f5f9;
    --text-primary: #0f172a;
    --text-secondary: #334155;
    --text-tertiary: #64748b;
    --border-default: #e2e8f0;
    --border-subtle: #f1f5f9;
}

.dark {
    --surface-primary: #0f172a;
    --surface-secondary: #1e293b;
    --surface-tertiary: #334155;
    --text-primary: #f8fafc;
    --text-secondary: #cbd5e1;
    --text-tertiary: #64748b;
    --border-default: #334155;
    --border-subtle: #1e293b;
}

/* Premium Typography Classes */
.font-display {
    font-family: var(--font-display);
    letter-spacing: -0.02em;
}

.font-body {
    font-family: var(--font-body);
}

/* Gradient text */
.text-gradient {
    background: linear-gradient(135deg, var(--color-brand-500) 0%, var(--color-accent-500) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Glass morphism */
.glass {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.dark .glass {
    background: rgba(15, 23, 42, 0.7);
}

/* Premium shadows */
.shadow-premium {
    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.04),
        0 4px 8px rgba(0, 0, 0, 0.04),
        0 16px 32px rgba(0, 0, 0, 0.04);
}

.shadow-premium-lg {
    box-shadow:
        0 2px 4px rgba(0, 0, 0, 0.04),
        0 8px 16px rgba(0, 0, 0, 0.06),
        0 24px 48px rgba(0, 0, 0, 0.08);
}

/* Status dot pulse */
.status-pulse {
    position: relative;
}

.status-pulse::before {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: 50%;
    background: currentColor;
    opacity: 0.3;
    animation: pulse-soft 2s ease-in-out infinite;
}

/* Noise texture overlay */
.noise-overlay::before {
    content: '';
    position: absolute;
    inset: 0;
    opacity: 0.025;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
    pointer-events: none;
}

/* Mesh gradient background */
.mesh-gradient {
    background:
        radial-gradient(at 0% 0%, rgba(6, 182, 212, 0.08) 0px, transparent 50%),
        radial-gradient(at 100% 0%, rgba(249, 115, 22, 0.06) 0px, transparent 50%),
        radial-gradient(at 100% 100%, rgba(6, 182, 212, 0.05) 0px, transparent 50%),
        var(--surface-secondary);
}

.dark .mesh-gradient {
    background:
        radial-gradient(at 0% 0%, rgba(6, 182, 212, 0.15) 0px, transparent 50%),
        radial-gradient(at 100% 0%, rgba(249, 115, 22, 0.1) 0px, transparent 50%),
        radial-gradient(at 100% 100%, rgba(6, 182, 212, 0.08) 0px, transparent 50%),
        var(--surface-secondary);
}