/* base/TOKENS.CSS */

:root {
    /* Brand Colours */
    --dynamo-red:    #B90A0A;
    --soft-coral:    #E07A5F;
    --golden-yellow: #E8B04B;
    --dark-yellow:   #C69436;
    --dark-green:    #648F5F;
    --light-green:   #84B281;
    --dusty-blue:    #7B96B7;
    --dark-blue:     #3D5A80;

    /* Neutrals */
    --dark-gray:   #333;
    --medium-gray: #666;
    --line-gray:   #999;
    --light-gray:  #ccc;
    --silver-mist: #E8E8E8;
    --off-white:   #FAF9F5;
    --nested-box:  #EFF2F7;

    /* Shadows */
    --shadow-small:  0 8px 20px rgba(0,0,0,0.10);
    --shadow-medium: 0 8px 20px rgba(0,0,0,0.20);
    --shadow-hover:  0 8px 20px rgba(0,0,0,0.35);

    /* Border Radii */
    --radius-sm:     8px;
    --radius-md:     12px;
    --radius-lg:     16px;
    --radius-xl:     24px;
    --radius-pill:   999px;
    --radius-circle: 50%;

    /* Typography Scale */
    --text-hero: 3.5rem;
    --text-h1:   3rem;
    --text-h2:   2.5rem;
    --text-h3:   1.6rem;
    --text-lg:   1.2rem;
    --text-body: 1rem;
    --text-sm:   0.85rem;

    /* Layout */
    --content-width: 70%;

    /* Spacing Scale */
    --section-pad:  2rem;
    --card-pad:     1.5rem;
    --modal-pad:    1.5rem;
    --grid-gap:     1rem;
    --hero-pad-v:   1.5rem;
    --hero-pad-h:   1rem;

    /* Z-Index Stack */
    --z-dropdown:  100;
    --z-header:    200;
    --z-modal:     1000;
    --z-close-btn: 1010;

    /* Durations */
    --dur-fast:   0.12s;
    --dur-base:   0.22s;
    --dur-slow:   0.50s;
    --dur-loader: 1s;
    --dur-ticker: 30s;

    /* Easing */
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --ease-out:    cubic-bezier(0.16, 1, 0.30, 1);
    --ease-ui:     cubic-bezier(0.40, 0, 0.20, 1);

    /* Interaction */
    --hover-scale:      1.02;
    --hover-scale-sm:   1.15;
    --hover-lift:       -5px;
    --reveal-lift:      20px;

    /* Delays */
    --delay-stagger: 0.10s;

    /* Compound Transition Shorthands */
    --t-interact: transform  var(--dur-base) var(--ease-spring), box-shadow var(--dur-base) var(--ease-out);
    --t-color: color var(--dur-base) var(--ease-ui), background-color var(--dur-base) var(--ease-ui);
    --t-reveal: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
    --t-modal: opacity var(--dur-base) var(--ease-ui), visibility var(--dur-base) var(--ease-ui);
    --t-tooltip: opacity var(--dur-fast) var(--ease-ui), visibility var(--dur-fast) var(--ease-ui);

    /* Contextual Tokens */
    --hero-pipe-color: var(--dynamo-red);
    --dropdown-border-color: var(--dark-blue);
}

/* Responsive: Tablet */
@media (max-width: 1024px) {
    :root {
        --radius-sm:     6px;
        --radius-md:     10px;
        --radius-lg:     14px;
        --radius-xl:     20px;
        --content-width: 90%;
        --text-hero:     2.75rem;
        --text-h1:       2rem;
        --text-h2:       1.8rem;
        --text-h3:       1.4rem;
        --text-lg:       1.1rem;
        --section-pad: 1.5rem;
        --card-pad:    1.2rem;
        --modal-pad:   1.2rem;
        --grid-gap:    0.8rem;
    }
}

/* Responsive: Mobile */
@media (max-width: 480px) {
    :root {
        --radius-sm:     4px;
        --radius-md:     8px;
        --radius-lg:     12px;
        --radius-xl:     16px;
        --content-width: 90%;
        --text-hero:     2.25rem;
        --text-h1:       1.8rem;
        --text-h2:       1.5rem;
        --text-h3:       1.2rem;
        --text-lg:       1rem;
        --text-body:     0.95rem;
        --text-sm:       0.8rem;
        --section-pad:   1.5rem;
        --card-pad:      1rem;
        --modal-pad:     1rem;
        --grid-gap:      0.8rem;
        --hero-pad-v:    1rem;
        --hero-pad-h:    0.6rem;
    }
}