/* assets/css/style.css */

:root {
    /* Main Brand Action Colours */
    --color-electric-orange: #FF5018;
    --color-hot-red: #C71E06;        /* Perfect for button hover states */
    --color-deep-crimson: #971D1D;
    
    /* Backgrounds & Surfaces */
    --color-hyper-white: #FCF9FB;    /* Your new crisp main background */
    --color-silver-frost: #F0EAED;   /* Excellent for subtle UI cards or borders */
    
    /* Text & Dark Elements */
    --color-dark-blackberry: #1E141E; /* High-contrast main text colour */
    --color-blackberry: #381D2A;      /* Muted text or secondary headings */
    
    /* Accent Colours */
    --color-bubble-gum: #FFC6D4;
    --color-vivid-violet: #C4B8FF;
    --color-deep-violet: #9048C4;
    
    /* System Mappings (Keeps your current HTML working perfectly) */
    --color-primary: var(--color-electric-orange);
    --color-primary-hover: var(--color-hot-red);
    --color-bg-main: var(--color-hyper-white);
    --color-text-main: var(--color-dark-blackberry);
    --color-grad-start: var(--color-electric-orange);
    --color-grad-end: var(--color-deep-violet);
}

html { 
    scroll-behavior: smooth; 
}

/* Add this to the bottom of assets/css/style.css */

@keyframes float-ambient {
    0%, 100% { 
        transform: translate(0, 0) scale(1); 
        opacity: 0.15; 
    }
    33% { 
        transform: translate(30px, -50px) scale(1.1); 
        opacity: 0.25; 
    }
    66% { 
        transform: translate(-20px, 20px) scale(0.9); 
        opacity: 0.15; 
    }
}

.animate-ambient {
    animation: float-ambient 15s ease-in-out infinite;
}

.animate-ambient-delayed {
    animation: float-ambient 18s ease-in-out infinite reverse;
}