:root {
    /* Mapped from DB Settings to SpaceOS Variables */
    
    /* Colors */
    --liquid-accent: #ff0000;
    --text-main: #1D1D1F;
    --bg-color: #F5F5F7;
    
    --liquid-success: #34C759;
    --liquid-danger: #ff0000;
    --liquid-warning: #FF9500;
    
    --glass-surface: rgba(255, 255, 255, 0.7);
    --glass-border: rgba(255, 255, 255, 0.5);
    
    /* Calculated/Derived Colors */
    --liquid-accent-dim: #ff000014; /* 8% opacity approx */
    --liquid-accent-glow: #ff000066; /* 40% opacity */
    
    /* Typography */
    --font-heading: 'Inter', sans-serif;
    --font-body: 'Inter', sans-serif;
    
    /* Layout */
    --card-radius: 24px;
    --btn-radius: 50px;
    --input-radius: 12px;
    
    /* Legacy / Generic Mappings */
    --primary-color: var(--liquid-accent);
    --secondary-color: var(--text-main);
}

[data-theme="dark"] {
    /* Dark mode overrides */
    --bg-color: #050505;
    --text-main: #F5F5F7;
    --glass-surface: rgba(20, 20, 20, 0.7);
    --glass-border: rgba(255, 255, 255, 0.1);
}

body {
    background-color: var(--bg-color);
    color: var(--text-main);
    font-family: var(--font-body);
}

h1, h2, h3, h4, h5, h6, .hero-title-v2, .section-title {
    font-family: var(--font-heading);
}

/* Ensure components use the dynamic radius/color */
.btn {
    border-radius: var(--btn-radius) !important;
}
.glass-card {
    border-radius: var(--card-radius) !important;
}
.space-input, .input-field, .textarea-field, .select-field {
    border-radius: var(--input-radius) !important;
}
.btn-primary {
    background: var(--liquid-accent) !important;
}