/* =========================================================
   01. DESIGN TOKENS
   ========================================================= */

:root {

    /* -----------------------------------------------------
       COLOUR SYSTEM
       ----------------------------------------------------- */

    --color-black: #050507;
    --color-black-soft: #09090d;
    --color-surface: #101017;
    --color-surface-light: #17171f;

    --color-white: #ffffff;
    --color-text: #eeeeF2;
    --color-text-muted: #9a9aa8;
    --color-text-faint: #656571;

    --color-line: rgba(255, 255, 255, 0.10);
    --color-line-strong: rgba(255, 255, 255, 0.20);

    --color-accent: #ffffff;
    --color-accent-soft: rgba(255, 255, 255, 0.12);

    /* -----------------------------------------------------
       SERVORAPRISE ENERGY SYSTEM
       Colour = innovation state, not decoration.
       ----------------------------------------------------- */

    --energy-discovery: #FFCC33;
    --energy-technology: #0077FF;
    --energy-growth: #00C977;
    --energy-creativity: #FF3399;
    --energy-engineering: #FF8800;
    --energy-experimentation: #9900FF;

    --energy-discovery-rgb: 255, 204, 51;
    --energy-technology-rgb: 0, 119, 255;
    --energy-growth-rgb: 0, 201, 119;
    --energy-creativity-rgb: 255, 51, 153;
    --energy-engineering-rgb: 255, 136, 0;
    --energy-experimentation-rgb: 153, 0, 255;

    --energy-integration:
        linear-gradient(
            135deg,
            var(--energy-discovery),
            var(--energy-technology),
            var(--energy-growth),
            var(--energy-creativity),
            var(--energy-engineering),
            var(--energy-experimentation)
        );

    --energy-glow-soft: 0.10;
    --energy-glow-medium: 0.20;
    --energy-glow-strong: 0.35;




    /* -----------------------------------------------------
       TYPOGRAPHY
       ----------------------------------------------------- */

    --font-body: "Inter", sans-serif;
    --font-display: "Space Grotesk", sans-serif;


    /* -----------------------------------------------------
       TYPE SCALE
       ----------------------------------------------------- */

    --text-xs: 0.6875rem;
    --text-sm: 0.8125rem;
    --text-md: 1rem;
    --text-lg: 1.25rem;
    --text-xl: 1.75rem;
    --text-2xl: 2.5rem;
    --text-3xl: 4rem;
    --text-4xl: 6rem;


    /* -----------------------------------------------------
       SPACING
       ----------------------------------------------------- */

    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-7: 3rem;
    --space-8: 4rem;
    --space-9: 6rem;
    --space-10: 8rem;
    --space-11: 12rem;


    /* -----------------------------------------------------
       LAYOUT
       ----------------------------------------------------- */

    --container-width: 1400px;
    --container-padding: 4vw;

    --section-padding: clamp(6rem, 12vw, 12rem);


    /* -----------------------------------------------------
       RADII
       ----------------------------------------------------- */

    --radius-sm: 0.375rem;
    --radius-md: 0.75rem;
    --radius-lg: 1.5rem;
    --radius-pill: 999px;


    /* -----------------------------------------------------
       MOTION
       ----------------------------------------------------- */

    --ease-standard: cubic-bezier(0.22, 1, 0.36, 1);
    --ease-smooth: cubic-bezier(0.16, 1, 0.3, 1);

    --duration-fast: 180ms;
    --duration-normal: 450ms;
    --duration-slow: 900ms;


    /* -----------------------------------------------------
       Z-INDEX
       ----------------------------------------------------- */

    --z-background: -10;
    --z-content: 1;
    --z-header: 100;
    --z-menu: 200;
    --z-modal: 500;
}

/* =========================================================
   ENERGY STATE UTILITIES
   ========================================================= */

.energy-discovery {
    --energy-current: var(--energy-discovery);
    --energy-current-rgb: var(--energy-discovery-rgb);
}

.energy-technology {
    --energy-current: var(--energy-technology);
    --energy-current-rgb: var(--energy-technology-rgb);
}

.energy-growth {
    --energy-current: var(--energy-growth);
    --energy-current-rgb: var(--energy-growth-rgb);
}

.energy-creativity {
    --energy-current: var(--energy-creativity);
    --energy-current-rgb: var(--energy-creativity-rgb);
}

.energy-engineering {
    --energy-current: var(--energy-engineering);
    --energy-current-rgb: var(--energy-engineering-rgb);
}

.energy-experimentation {
    --energy-current: var(--energy-experimentation);
    --energy-current-rgb: var(--energy-experimentation-rgb);
}