@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300..700&display=swap");

:root {
    --font-family: "Space Grotest", sans-serif;
    --max-width: 1024px;

    --ens-bg: hsl(0, 4%, 18%);
    --ens-fg: hsl(0, 0%, 83%);
    --ens-fg-medium: hsl(0, 0%, 65%);

    --ens-primary-base: hsl(195, 100%, 40%);
    --ens-secondary-base: hsl(18, 90%, 55%);

    --text-sm: clamp(0.85rem, 0.8rem + 0.2vw, 0.95rem);
    --text-base: clam(1rem, 0.95rem + 0.3vw, 1.15rem);
    --text-h4: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
    --text-h3: clamp(1.5rem, 1.3rem + 1vw, 2rem);
    --text-h2: clamp(2rem, 1.6rem + 1.5vw, 2.8rem);
    --text-h1: clamp(2.5rem, 2rem + 2vw, 4rem);

    --ens-primary-100: hsl(
        from var(--ens-primary-base) calc(h - 12) calc(s + 15) 95%
    );

    --ens-primary-200: hsl(
        from var(--ens-primary-base) calc(h - 10) calc(s + 12) 85%
    );

    --ens-primary-300: hsl(
        from var(--ens-primary-base) calc(h - 8) calc(s + 8) 75%
    );

    --ens-primary-400: hsl(
        from var(--ens-primary-base) calc(h - 6) calc(s + 5) 65%
    );

    --ens-primary-500: hsl(
        from var(--ens-primary-base) calc(h - 12) calc(s + 2) 55%
    );

    --ens-primary-600: hsl(from var(--ens-primary-base) h s 45%);

    --ens-primary-700: hsl(
        from var(--ens-primary-base) calc(h + 2) calc(s - 3) 35%
    );

    --ens-primary-800: hsl(
        from var(--ens-primary-base) calc(h + 4) calc(s - 8) 25%
    );

    --ens-primary-900: hsl(
        from var(--ens-primary-base) calc(h + 6) calc(s - 15) 18%
    );

    --ens-secondary-100: hsl(
        from var(--ens-secondary-base) calc(h - 12) calc(s + 15) 95%
    );

    --ens-secondary-200: hsl(
        from var(--ens-secondary-base) calc(h - 10) calc(s + 12) 85%
    );

    --ens-secondary-300: hsl(
        from var(--ens-secondary-base) calc(h - 8) calc(s + 8) 75%
    );

    --ens-secondary-400: hsl(
        from var(--ens-secondary-base) calc(h - 6) calc(s + 5) 65%
    );

    --ens-secondary-500: hsl(
        from var(--ens-secondary-base) calc(h - 12) calc(s + 2) 55%
    );

    --ens-secondary-600: hsl(from var(--ens-secondary-base) h s 45%);

    --ens-secondary-700: hsl(
        from var(--ens-secondary-base) calc(h + 2) calc(s - 3) 35%
    );

    --ens-secondary-800: hsl(
        from var(--ens-secondary-base) calc(h + 4) calc(s - 8) 25%
    );

    --ens-secondary-900: hsl(
        from var(--ens-secondary-base) calc(h + 6) calc(s - 15) 18%
    );

    --ens-surface-0: hsl(from var(--ens-bg) h s calc(l + 2));
    --ens-surface-1: hsl(from var(--ens-bg) h s calc(l + 4));
    --ens-surface-2: hsl(from var(--ens-bg) h s calc(l + 8));

    --ens-lh: 1.6;
}

[data-theme="light"] {
    --ens-bg: hsl(0, 0%, 97%);
    --ens-fg: hsl(0, 4%, 18%);
    --ens-fg-medium: hsl(0, 0%, 40%);
    --ens-surface-0: hsl(from var(--ens-bg) h s calc(l - 2));
    --ens-surface-1: hsl(from var(--ens-bg) h s calc(l - 4));
    --ens-surface-2: hsl(from var(--ens-bg) h s calc(l - 8));
}