:root {
    /* COLORS */
    --ea-bg: #000;
    --ea-fg: #fff;
    --ea-fg-soft: rgba(255,255,255,.75);
    --ea-fg-dim: rgba(255,255,255,.45);

    --ea-accent-1: #9df;
    --ea-accent-2: #4af;
    --ea-accent-3: #0ef;
    --ea-surface-1: rgba(255,255,255,.03);
    --ea-surface-2: rgba(255,255,255,.06);
    --ea-surface-3: rgba(255,255,255,.1);

    /* OPACITIES */
    --ea-alpha-05: .05;
    --ea-alpha-10: .1;
    --ea-alpha-20: .2;

    /* TYPOGRAPHY */
    --ea-font-main: 'Inter', 'Inter var', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --ea-font-size-sm: clamp(.85rem, .6vw + .82rem, .95rem);
    --ea-font-size-md: clamp(1rem, .5vw + .95rem, 1.15rem);
    --ea-font-size-lg: clamp(1.25rem, 1vw + 1.05rem, 1.8rem);
    --ea-font-size-xl: clamp(1.75rem, 1.6vw + 1.2rem, 2.6rem);
    --ea-font-size-xxl: clamp(2.4rem, 3vw + 1.4rem, 3.8rem);
    --ea-leading-sm: 1.4;
    --ea-leading-md: 1.55;
    --ea-leading-lg: 1.65;
    --ea-weight-regular: 400;
    --ea-weight-medium: 500;
    --ea-weight-semibold: 600;

    /* LAYOUT */
    --ea-content-max: clamp(60ch, 80vw, 90ch);
    --ea-content-max-detail: clamp(82ch, 88vw, 110ch);
    --ea-content-wide: clamp(68ch, 86vw, 72rem);
    --ea-progress-nav-width: clamp(60px, 5vw, 88px);
    --ea-content-offset-left: calc(var(--ea-progress-nav-width) + clamp(0.5rem, 2vw, 2rem));
    --ea-axis-desktop-gap: clamp(0.75rem, 2vw, 2.5rem);
    --ea-axis-desktop-gap-active: clamp(0rem, 1vw, 1.5rem);
    --ea-detail-padding-inline: clamp(1.5rem, 3vw, 2.75rem);
    --ea-detail-pad-mobile: clamp(1.1rem, 4vw, 1.6rem);
    --ea-detail-max-width: min(88vw, 110ch);
    --ea-detail-grid-gap: clamp(1.35rem, 2.2vw, 2.5rem);
    --ea-detail-grid-col-min: clamp(20rem, 24vw, 26rem);
    --ea-detail-mobile-pad-inline: clamp(1rem, 4vw, 1.5rem);
    --ea-detail-mobile-pad-block: clamp(1.35rem, 4vw, 2.25rem);
    --ea-detail-mobile-gap: clamp(1rem, 3vw, 1.75rem);
    --ea-detail-mobile-card-pad: clamp(1rem, 3vw, 1.5rem);
    --ea-detail-mobile-max: min(calc(100vw - (2 * var(--ea-detail-mobile-pad-inline))), 96vw, 110ch);
    --ea-container-max: var(--ea-content-wide);
    --ea-layout-max: var(--ea-container-max);
    --ea-max-width: var(--ea-layout-max); /* legacy alias */
    --ea-max: var(--ea-layout-max);       /* legacy alias */
    --ea-space-xs: clamp(.45rem, .7vw, .65rem);
    --ea-space-sm: clamp(.7rem, 1vw, .95rem);
    --ea-space-md: clamp(1rem, 1.6vw, 1.5rem);
    --ea-space-lg: clamp(1.5rem, 3vw, 2.5rem);
    --ea-space-xl: clamp(2.25rem, 4.5vw, 3.75rem);
    --ea-space-xxl: clamp(3rem, 8vw, 6rem);
    --ea-pad-inline: clamp(1rem, 4vw, 3rem);
    --ea-pad-block: clamp(1.5rem, 6dvh, 3rem);
    --ea-pad: var(--ea-pad-inline);
    --ea-section-pad-top: clamp(3rem, 8vh, 9rem);
    --ea-section-pad-bottom: clamp(3rem, 10vh, 11rem);
    --ea-section-vspace: clamp(3rem, 12dvh, 6.5rem);
    --ea-view-height: 80dvh;
    --ea-grid-gap: clamp(1.25rem, 3vw, 2.5rem);
    --ea-grid-gap-tight: clamp(1rem, 2vw, 1.75rem);
    --ea-grid-col-min: clamp(15rem, 26vw, 20rem);

    /* RADIUS */
    --ea-radius-xs: .25rem;
    --ea-radius-sm: .375rem;
    --ea-radius-md: .75rem;
    --ea-radius-lg: 1.5rem;
    --ea-radius-xl: 2rem;

    /* SHADOWS */
    --ea-shadow-soft: 0 0 20px rgba(255,255,255,.08);

    /* ANIMATIONS */
    --ea-dur-fast: .25s;
    --ea-dur-normal: .45s;
    --ea-dur-slow: .75s;
    --ea-ease-standard: cubic-bezier(.25,.46,.45,.94);
    --ea-ease-emph: cubic-bezier(.4,0,.2,1);

    /* BREAKPOINTS */
    --ea-bp-sm: 40rem;
    --ea-bp-md: 56rem;
    --ea-bp-lg: 72rem;
    --ea-bp-xl: 90rem;

    /* Z-LAYERS */
    --ea-layer-base: 1;
    --ea-layer-overlay: 10;
    --ea-layer-modal: 100;
}