/* ═══════════════════════════════════════════════════════════
   ZynapseLead — logo-derived brand palette
   Primary #00D4FF · Accent #00FF87 · CTA #FF6B2B · Violet #3D3FEA
═══════════════════════════════════════════════════════════ */
:root {
    /* Core logo colors */
    --brand-primary: #00D4FF;
    --brand-accent: #00FF87;
    --brand-cta: #FF6B2B;
    --brand-violet: #3D3FEA;
    --brand-orange-pixel: #DB6E29;

    /* RGB channels */
    --brand-primary-rgb: 0, 212, 255;
    --brand-accent-rgb: 0, 255, 135;
    --brand-cta-rgb: 255, 107, 43;
    --brand-violet-rgb: 61, 63, 234;
    --brand-dark-rgb: 10, 22, 40;

    /* Interaction */
    --brand-primary-hover: #00bde6;
    --brand-primary-readable: #009bb8;
    --brand-cta-hover: #e55a20;
    --brand-primary-fg: #0A1628;
    --brand-accent-fg: #042818;

    /* Surfaces (logo navy family) */
    --brand-dark: #0A1628;
    --brand-dark-mid: #0D2040;
    --brand-dark-light: #112248;
    --brand-dark-deep: #060f1e;
    --brand-wordmark: #4A5D78;
    --brand-muted: #8A9BB0;
    --brand-text: #e0e6f0;
    --brand-section-light: #f0f6fa;

    /* Logo gradients */
    --brand-gradient-logo: linear-gradient(135deg, #00D4FF 0%, #3D3FEA 48%, #00FF87 100%);
    --brand-gradient-hero: linear-gradient(135deg, #00D4FF 0%, #00FF87 100%);
    --brand-gradient-cta: linear-gradient(135deg, #FF6B2B 0%, #DB6E29 100%);
    --brand-gradient-dark: linear-gradient(160deg, #060f1e 0%, #0A1628 42%, #0D2040 100%);
    --brand-gradient-banner: linear-gradient(135deg, #0A1628 0%, #0D2040 45%, #112248 100%);
    --brand-gradient-icon: linear-gradient(145deg, rgba(0, 212, 255, 0.22) 0%, rgba(61, 63, 234, 0.14) 45%, rgba(0, 255, 135, 0.16) 100%);

    /* Glows */
    --brand-glow-primary: 0 12px 40px rgba(var(--brand-primary-rgb), 0.22);
    --brand-glow-accent: 0 12px 40px rgba(var(--brand-accent-rgb), 0.18);
    --brand-glow-cta: 0 12px 40px rgba(var(--brand-cta-rgb), 0.28);

    /* Semantic aliases */
    --brand-success: var(--brand-accent);
    --brand-info: var(--brand-primary);
    --brand-link: var(--brand-primary);
    --brand-link-hover: var(--brand-primary-readable);
}

/* Logo gradient text utility */
.brand-gradient-text {
    background: var(--brand-gradient-logo);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.brand-gradient-icon {
    background: var(--brand-gradient-icon);
    border: 1px solid rgba(var(--brand-primary-rgb), 0.22);
    color: var(--brand-primary-readable);
}