:root {
    --color-primary: #168a24;
    --color-primary-interactive: #39c348;
    --color-primary-soft: #e8f3e9;
    --color-primary-soft-interactive: #d8ebda;
    --color-technology: #0879b8;
    --color-technology-deep: #12384f;
    --color-technology-muted: #557384;
    --color-technology-soft: #e5f2f8;
    --color-technology-surface: #f0f7fa;
    --color-technology-border: #c5dce7;
    --color-technology-visual-border: rgb(8 121 184 / 42%);
    --color-panel-overlay-top: rgb(5 25 39 / 18%);
    --color-panel-overlay-bottom: rgb(4 19 30 / 94%);
    --color-text-on-dark-muted: rgb(255 255 255 / 78%);
    --color-panel-text-muted: var(--color-text-on-dark-muted);
    --color-integration-background: #0a5f95;
    --color-integration-sky: #52b9e8;
    --color-integration-depth: #0b3155;
    --color-integration-surface: rgb(7 24 39 / 82%);
    --color-integration-line: rgb(231 247 253 / 28%);
    --color-integration-line-strong: rgb(231 247 253 / 58%);
    --color-integration-glow: rgb(191 230 247 / 22%);
    --color-integration-media-overlay-start: rgb(7 24 39 / 8%);
    --color-integration-media-overlay-end: rgb(7 24 39 / 76%);
    --shadow-integration-core: 0 0 3rem rgb(57 195 72 / 12%), 0 0 7rem rgb(191 230 247 / 14%);
    --shadow-integration-signal: 0 0 1rem rgb(57 195 72 / 55%);
    --color-background: #f7f8f5;
    --color-background-sky: #bfe6f7;
    --color-background-pale: #e7f5fb;
    --color-background-offwhite: #f7fbfd;
    --color-surface: #ffffff;
    --color-header-surface: rgb(255 255 255 / 45%);
    --color-header-border: rgb(255 255 255 / 58%);
    --color-contact-control-surface: rgb(255 255 255 / 48%);
    --color-contact-control-border: rgb(57 195 72 / 42%);
    --color-contact-control-glow: rgb(57 195 72 / 24%);
    --color-contact-control-glow-hover: rgb(57 195 72 / 42%);
    --color-floating-control-surface: rgb(22 138 36 / 92%);
    --color-floating-control-surface-hover: rgb(57 195 72 / 96%);
    --color-floating-control-border: rgb(255 255 255 / 42%);
    --shadow-floating-control: 0 0.75rem 2rem rgb(7 24 39 / 24%);
    --shadow-contact-control: 0 0 1.25rem var(--color-contact-control-glow);
    --shadow-contact-control-hover: 0 0 1.75rem var(--color-contact-control-glow-hover);
    --color-clients-ink: #10384f;
    --color-clients-muted: #557384;
    --color-clients-surface: rgb(255 255 255 / 72%);
    --color-clients-surface-soft: rgb(247 251 253 / 52%);
    --color-clients-line: rgb(8 121 184 / 18%);
    --color-clients-glow: rgb(82 185 232 / 28%);
    --color-client-sena: #39a900;
    --color-about-ink: var(--color-clients-ink);
    --color-about-muted: var(--color-clients-muted);
    --color-about-surface: rgb(255 255 255 / 76%);
    --color-about-line: rgb(8 121 184 / 20%);
    --color-about-media-overlay: rgb(7 24 39 / 16%);
    --color-about-glow: rgb(82 185 232 / 30%);
    --color-footer-background: var(--color-background-offwhite);
    --color-footer-panel: var(--color-background-pale);
    --color-footer-text: var(--color-clients-ink);
    --color-footer-text-muted: var(--color-clients-muted);
    --color-footer-line: var(--color-technology-border);
    --color-footer-highlight: rgb(255 255 255 / 62%);
    --color-footer-glow: rgb(82 185 232 / 22%);
    --color-footer-credit-surface: rgb(255 255 255 / 68%);
    --color-footer-credit-border: rgb(57 195 72 / 34%);
    --shadow-footer-credit: 0 0.65rem 1.8rem rgb(8 121 184 / 12%);
    --color-footer-transition-mid: var(--color-background-sky);
    --color-footer-transition-haze: rgb(82 185 232 / 30%);
    --color-footer-transition-start: var(--color-background-pale);
    --shadow-client-logo: 0 1.25rem 3.5rem rgb(7 24 39 / 10%);
    --color-text: #171a17;
    --color-text-muted: #586058;
    --color-border: #dce3dc;
    --color-dark-section: #0d120e;
    --color-focus: #168a24;
    --color-on-primary: #ffffff;
    --color-mask-transparent: rgb(0 0 0 / 0%);
    --color-mask-opaque: rgb(0 0 0 / 100%);

    --gradient-direction-section-light: 110deg;
    --gradient-stop-section-sky: 0%;
    --gradient-stop-section-pale: 48%;
    --gradient-stop-section-offwhite: 100%;
    --gradient-section-light: linear-gradient(
        var(--gradient-direction-section-light),
        var(--color-background-sky) var(--gradient-stop-section-sky),
        var(--color-background-pale) var(--gradient-stop-section-pale),
        var(--color-background-offwhite) var(--gradient-stop-section-offwhite)
    );

    --gradient-direction-panel-overlay: to bottom;
    --gradient-stop-panel-overlay-top: 0%;
    --gradient-stop-panel-overlay-bottom: 100%;
    --gradient-panel-overlay: linear-gradient(
        var(--gradient-direction-panel-overlay),
        var(--color-panel-overlay-top) var(--gradient-stop-panel-overlay-top),
        var(--color-panel-overlay-bottom) var(--gradient-stop-panel-overlay-bottom)
    );

    --gradient-direction-integration: 135deg;
    --gradient-stop-integration-sky: 0%;
    --gradient-stop-integration-mid: 48%;
    --gradient-stop-integration-depth: 100%;
    --gradient-stop-integration-glow: 0%;
    --gradient-stop-integration-clear: 58%;
    --gradient-section-integration: radial-gradient(
        circle at 50% 52%,
        var(--color-integration-glow) var(--gradient-stop-integration-glow),
        var(--color-mask-transparent) var(--gradient-stop-integration-clear)
    ), linear-gradient(
        var(--gradient-direction-integration),
        var(--color-integration-sky) var(--gradient-stop-integration-sky),
        var(--color-integration-background) var(--gradient-stop-integration-mid),
        var(--color-integration-depth) var(--gradient-stop-integration-depth)
    );

    --gradient-direction-integration-media: to bottom;
    --gradient-stop-integration-media-start: 0%;
    --gradient-stop-integration-media-end: 100%;
    --gradient-integration-media-overlay: linear-gradient(
        var(--gradient-direction-integration-media),
        var(--color-integration-media-overlay-start) var(--gradient-stop-integration-media-start),
        var(--color-integration-media-overlay-end) var(--gradient-stop-integration-media-end)
    );

    --gradient-direction-clients-hero: 125deg;
    --gradient-clients-hero: radial-gradient(
        circle at 78% 24%,
        var(--color-clients-glow),
        var(--color-mask-transparent) 42%
    ), linear-gradient(
        var(--gradient-direction-clients-hero),
        var(--color-background-sky),
        var(--color-background-pale) 52%,
        var(--color-background-offwhite)
    );

    --gradient-direction-clients-stage: 160deg;
    --gradient-clients-stage: linear-gradient(
        var(--gradient-direction-clients-stage),
        var(--color-background-offwhite),
        var(--color-background-pale) 54%,
        var(--color-background-sky)
    );

    --gradient-direction-footer: 118deg;
    --gradient-about-hero: radial-gradient(
        circle at 18% 24%,
        var(--color-about-glow),
        var(--color-mask-transparent) 44%
    ), linear-gradient(
        118deg,
        var(--color-background-sky),
        var(--color-background-pale) 52%,
        var(--color-background-offwhite)
    );
    --gradient-about-story: linear-gradient(
        155deg,
        var(--color-background-offwhite),
        var(--color-background-pale) 58%,
        var(--color-background-sky)
    );
    --gradient-about-image: linear-gradient(
        to top,
        var(--color-about-media-overlay),
        var(--color-mask-transparent) 48%
    );
    --gradient-stop-footer-highlight: 0%;
    --gradient-stop-footer-clear: 52%;
    --gradient-stop-footer-panel: 0%;
    --gradient-stop-footer-pale: 58%;
    --gradient-stop-footer-offwhite: 100%;
    --gradient-footer: radial-gradient(
        circle at 24% 18%,
        var(--color-footer-highlight) var(--gradient-stop-footer-highlight),
        var(--color-mask-transparent) var(--gradient-stop-footer-clear)
    ), linear-gradient(
        var(--gradient-direction-footer),
        var(--color-footer-panel) var(--gradient-stop-footer-panel),
        var(--color-background-pale) var(--gradient-stop-footer-pale),
        var(--color-background-offwhite) var(--gradient-stop-footer-offwhite)
    );

    --gradient-direction-footer-image-mask: to left;
    --gradient-stop-footer-image-visible: 20%;
    --gradient-stop-footer-image-fade: 88%;
    --gradient-footer-image-mask: linear-gradient(
        var(--gradient-direction-footer-image-mask),
        var(--color-mask-opaque) var(--gradient-stop-footer-image-visible),
        var(--color-mask-transparent) var(--gradient-stop-footer-image-fade)
    );

    --gradient-direction-footer-transition: to bottom;
    --gradient-stop-footer-transition-start: 0%;
    --gradient-stop-footer-transition-mid: 54%;
    --gradient-stop-footer-transition-end: 100%;
    --gradient-stop-footer-transition-haze: 0%;
    --gradient-stop-footer-transition-clear: 62%;
    --gradient-footer-transition: radial-gradient(
        ellipse at 72% 100%,
        var(--color-footer-transition-haze) var(--gradient-stop-footer-transition-haze),
        var(--color-mask-transparent) var(--gradient-stop-footer-transition-clear)
    ), linear-gradient(
        var(--gradient-direction-footer-transition),
        var(--color-footer-transition-start) var(--gradient-stop-footer-transition-start),
        var(--color-footer-transition-mid) var(--gradient-stop-footer-transition-mid),
        var(--color-footer-background) var(--gradient-stop-footer-transition-end)
    );

    --font-family-base: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --font-size-label: clamp(0.8125rem, 0.78rem + 0.12vw, 0.875rem);
    --font-size-navigation: 1rem;
    --font-size-header-navigation: 1.125rem;
    --font-size-body: clamp(1.0625rem, 1.02rem + 0.2vw, 1.1875rem);
    --font-size-body-large: clamp(1.125rem, 1.06rem + 0.28vw, 1.25rem);
    --font-size-action: 1rem;
    --font-size-title: clamp(3.75rem, 5.55vw, 6.4rem);
    --font-size-title-tablet: clamp(3.5rem, 5.7vw, 5rem);
    --font-size-title-mobile: clamp(3rem, 12.8vw, 5rem);
    --font-size-navigation-overlay: clamp(2rem, 8vw, 4rem);
    --font-size-xl: clamp(1.375rem, 1.25rem + 0.5vw, 1.75rem);

    --font-size-xs: var(--font-size-label);
    --font-size-sm: var(--font-size-action);
    --font-size-base: var(--font-size-body);
    --font-size-lg: var(--font-size-body-large);
    --line-height-tight: 1.2;
    --line-height-base: 1.6;

    --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;

    --container-max: 90rem;
    --container-padding: clamp(1.25rem, 4vw, 4rem);
    --header-min-height: 9rem;
    --header-menu-height: 6.25rem;
    --header-mobile-height: 8rem;
    --header-menu-mobile-height: 5rem;
    --radius-media: 1.5rem;
    --radius-pill: 999px;

    --breakpoint-sm: 36rem;
    --breakpoint-md: 48rem;
    --breakpoint-lg: 64rem;
    --breakpoint-xl: 80rem;
}