/* ===================================================
   Cell IQ - Global Design Tokens
   =================================================== */

:root {
    /* Brand Colors */
    --brand-red: #E63946;
    --brand-red-dark: #C62828;
    --brand-red-glow: rgba(230, 57, 70, 0.25);

    /* Neutral Colors / Dark Mode Theme */
    --bg-dark-base: #0B0E14;
    /* Deep, premium dark blue/black */
    --bg-dark-surface: #151A22;
    /* Slightly lighter for cards */
    --bg-dark-elevated: #1F2633;
    /* For hovered elements or borders */

    --text-primary: #F8F9FA;
    --text-secondary: #9BA4B5;
    --text-muted: #6B7280;

    --border-color: rgba(255, 255, 255, 0.08);
    --border-color-hover: rgba(255, 255, 255, 0.15);

    /* Gradients */
    --gradient-brand: linear-gradient(135deg, var(--brand-red) 0%, var(--brand-red-dark) 100%);
    --gradient-dark: linear-gradient(180deg, var(--bg-dark-base) 0%, #06080A 100%);
    --gradient-glass: linear-gradient(145deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.01) 100%);

    /* Typography */
    --font-heading: 'Outfit', system-ui, sans-serif;
    --font-body: 'Inter', system-ui, sans-serif;

    /* Spacing & Layout */
    --container-max-width: 1280px;
    --container-padding: 24px;
    --section-spacing: 120px;

    /* Borders & Shadows */
    --radius-sm: 8px;
    --radius-md: 16px;
    --radius-lg: 24px;
    --radius-round: 9999px;

    --shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.2);
    --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 24px 48px rgba(0, 0, 0, 0.5);

    /* Transitions */
    --transition-fast: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-smooth: 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Light mode overrides (can be toggled via body class) */
body.ciq-light-mode {
    --bg-dark-base: #FFFFFF;
    --bg-dark-surface: #F8F9FA;
    --bg-dark-elevated: #E5E7EB;

    --text-primary: #111827;
    --text-secondary: #4B5563;
    --text-muted: #9CA3AF;

    --border-color: rgba(0, 0, 0, 0.08);
    --border-color-hover: rgba(0, 0, 0, 0.15);

    --gradient-dark: linear-gradient(180deg, #FFFFFF 0%, #F3F4F6 100%);
    --gradient-glass: linear-gradient(145deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.7) 100%);

    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 24px 48px rgba(0, 0, 0, 0.12);
}