/* css/variables.css */
:root {
    /* --- Core Brand Colors --- */
    --brand-cyan: #00b2da;
    --brand-cyan-rgb: 0, 178, 218;
    --brand-magenta: #e50ba0;
    --brand-magenta-rgb: 229, 11, 160;
    --brand-yellow: #ffca45;
    --brand-yellow-rgb: 255, 202, 69;
    --brand-white: #f3f3f3;
    --brand-charcoal: #1c1c1c;

    /* --- Material System Tokens --- */
    --primary: var(--brand-cyan);
    --primary-dark: #009ebf;
    /* Slightly darkened cyan for button hovers */
    --secondary: var(--brand-magenta);
    --accent: var(--brand-yellow);

    --background: var(--brand-white);
    --surface: #ffffff;
    /* Pure white for cards to pop off the off-white background */
    --on-surface: var(--brand-charcoal);
    /* Text color */

    /* --- Typography --- */
    --font-heading: 'Outfit', sans-serif;
    --font-body: 'Poppins', sans-serif;

    /* --- Material Elevations (Shadows) --- */
    /* Adjusted to use your charcoal color for a more cohesive shadow */
    --elevation-1: 0 1px 2px 0 rgba(28, 28, 28, 0.08), 0 1px 3px 1px rgba(28, 28, 28, 0.04);
    --elevation-2: 0 1px 2px 0 rgba(28, 28, 28, 0.1), 0 2px 6px 2px rgba(28, 28, 28, 0.06);

    /* --- Animation --- */
    --transition-standard: all 0.2s cubic-bezier(0.4, 0.0, 0.2, 1);

    /* Google's deceleration curve */
    --transition-entrance: cubic-bezier(0.0, 0.0, 0.2, 1);
}