/* AstroNumer — design tokens (modern cosmic theme) */
:root {
    /* Deep space */
    --cosmos-void: #0b0d1a;
    --cosmos-deep: #12102a;
    --cosmos-mid: #1a1035;
    --cosmos-surface: #1e1640;

    /* Aurora accents */
    --aurora-cyan: #22d3ee;
    --aurora-violet: #a855f7;
    --aurora-magenta: #ec4899;
    --aurora-gold: #fbbf24;
    --aurora-indigo: #6366f1;

    /* Brand gradients */
    --gradient-aurora: linear-gradient(135deg, #6366f1 0%, #a855f7 45%, #ec4899 100%);
    --gradient-aurora-soft: linear-gradient(135deg, rgba(99, 102, 241, 0.15) 0%, rgba(168, 85, 247, 0.12) 50%, rgba(236, 72, 153, 0.1) 100%);
    --gradient-cosmos: linear-gradient(160deg, var(--cosmos-void) 0%, var(--cosmos-deep) 45%, var(--cosmos-mid) 100%);
    --gradient-hero: linear-gradient(160deg, #0b0d1a 0%, #12102a 35%, #1a1035 70%, #0f1a3d 100%);

    /* UI surfaces */
    --surface-glass: rgba(255, 255, 255, 0.06);
    --surface-glass-border: rgba(255, 255, 255, 0.12);
    --surface-card: rgba(255, 255, 255, 0.97);
    --surface-light: #f4f2ff;
    --surface-muted: #ede9fe;

    /* Text */
    --text-primary: #1e1b4b;
    --text-secondary: #4c4680;
    --text-muted: #7c7a9a;
    --text-on-dark: #f0eeff;
    --text-on-dark-muted: #b8b4d4;

    /* Legacy aliases (backward compat) */
    --primary-color: #4c3d8a;
    --secondary-color: #6366f1;
    --accent-color: #ec4899;

    /* Radii */
    --radius-sm: 10px;
    --radius-md: 16px;
    --radius-lg: 24px;
    --radius-xl: 32px;
    --radius-pill: 999px;

    /* Shadows */
    --shadow-sm: 0 2px 8px rgba(15, 10, 40, 0.08);
    --shadow-md: 0 8px 32px rgba(99, 102, 241, 0.12);
    --shadow-lg: 0 16px 48px rgba(99, 102, 241, 0.18);
    --shadow-glow: 0 0 40px rgba(168, 85, 247, 0.35);
    --shadow-glow-cyan: 0 0 30px rgba(34, 211, 238, 0.25);

    /* Motion */
    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    --transition-fast: 0.18s var(--ease-out);
    --transition-base: 0.28s var(--ease-out);

    /* Typography */
    --font-display: 'Playfair Display', Georgia, serif;
    --font-body: 'DM Sans', 'Montserrat', system-ui, sans-serif;
    --font-ui: 'DM Sans', 'Montserrat', system-ui, sans-serif;
}

@keyframes aurora-shift {
    0%, 100% { opacity: 0.7; transform: translateX(0) scale(1); }
    50% { opacity: 1; transform: translateX(2%) scale(1.02); }
}

@keyframes twinkle {
    0%, 100% { opacity: 0.4; }
    50% { opacity: 0.9; }
}

@keyframes shimmer {
    0% { background-position: -200% center; }
    100% { background-position: 200% center; }
}

@keyframes float-glow {
    0%, 100% { box-shadow: 0 8px 32px rgba(99, 102, 241, 0.35), 0 0 0 0 rgba(168, 85, 247, 0); }
    50% { box-shadow: 0 12px 40px rgba(168, 85, 247, 0.45), 0 0 24px 4px rgba(34, 211, 238, 0.15); }
}