/**
 * SyncIRL Design System — shared across all splash site pages.
 * Source of truth for colors, gradients, and semantic tokens.
 *
 * React Native equivalent: constants/DesignSystem.ts
 */

:root {
    /* ── Outrun Accent Colors ── */
    --neon-blue: #00D9FF;
    --neon-pink: #FF006E;
    --neon-orange: #FF6B35;
    --neon-purple: #8B5CF6;
    --electric-blue: #3B82F6;
    --neon-green: #00FFA3;

    /* ── Monochromatic Base (Dark Mode) ── */
    --dark-bg: #1A1A24;
    --dark-secondary: #22222D;
    --dark-card: #2A2A38;
    --dark-border: #35354A;
    --text-primary: #F5F5F7;
    --text-secondary: #9E9EAF;

    /* ── SyncBolt Gradient ──
       The signature outrun gradient. Use everywhere:
       buttons, borders, text masks, logo, accents.

       RN equivalent: SyncBoltGradient in constants/DesignSystem.ts
       Colors: pink → cyan → purple → pink (seamless loop)
    */
    --syncbolt-gradient: linear-gradient(90deg, var(--neon-pink), var(--neon-blue), var(--neon-purple), var(--neon-pink));

    /* Diagonal variant for cards / backgrounds */
    --syncbolt-gradient-diagonal: linear-gradient(135deg, var(--neon-pink), var(--neon-blue), var(--neon-purple));

    /* Animated stripe — wide enough for background-position animation */
    --syncbolt-gradient-animated: linear-gradient(90deg,
        var(--neon-pink), var(--neon-blue), var(--neon-purple),
        var(--neon-blue), var(--neon-pink), var(--neon-blue), var(--neon-purple));
}