/* assets/css/design-system.css */

:root {
    /* Core Colors */
    --neon-primary: #C9F31D;
    --deep-black: #0B0B0C;
    --text-primary: #FFFFFF;
    --text-secondary: rgba(255, 255, 255, 0.7);

    /* Typography */
    --font-heading: 'DM Sans', sans-serif;
    --font-body: 'Inter', sans-serif;

    /* Custom Animations & Easing */
    --ease-custom: cubic-bezier(0.16, 1, 0.3, 1);
    --transition-standard: all 0.5s var(--ease-custom);
}

/* Override Template Body & Background */
body {
    font-family: var(--font-body) !important;
    background-color: var(--deep-black) !important;
    color: var(--text-primary) !important;
}

/* Apply Heading Font */
h1, h2, h3, h4, h5, h6, 
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--font-heading) !important;
    color: var(--text-primary);
}

/* Example: Apply Neon to Primary Elements */
.theme-btn, .primary-text {
    color: var(--deep-black);
    background-color: var(--neon-primary);
    transition: var(--transition-standard);
}

.theme-btn:hover {
    background-color: #FFFFFF;
    transform: translateY(-2px);
}