/* Design System: Typography */

:root {
    --typography-headline-x1: clamp(2.25rem, 4vw, 3.75rem);
    --typography-paragraph-x1: clamp(1.125rem, 1.86vw, 1.625rem);
}

:root {
    --typography-weight-black: 800;
    --typography-weight-bold: 700;
    --typography-weight-medium: 600;
    --typography-weight-regular: 500;
    --typography-weight-light: 400;
    --typography-weight-thin: 300;
}

:root {
    --typography-typeface-display: ui-sans-serif, system-ui, sans-serif;
    --typography-typeface-text: ui-sans-serif, system-ui, sans-serif;
    --typography-typeface-mono: ui-monospace, monospace;
}

:root {
    font-family: var(--typography-typeface-text);
    font-feature-settings: 'liga', 'kern';
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-variant-ligatures: common-ligatures;
    text-rendering: optimizeLegibility;
}

/* Design System: Layout Breakdown */

@media (orientation: landscape) {
    :root {
        --layout-breakdown-column-count: 9;
    }
}

@media (orientation: portrait) {
    :root {
        --layout-breakdown-column-count: 4;
    }
}

:root {
    --layout-breakdown-inline-unit: calc(100vw / var(--layout-breakdown-column-count) / 12);
    --layout-breakdown-inline-gap-x1: var(--layout-breakdown-inline-unit);
    --layout-breakdown-inline-gap-x2: calc(var(--layout-breakdown-inline-unit) * 2);
    --layout-breakdown-inline-gap-x3: calc(var(--layout-breakdown-inline-unit) * 3);
    --layout-breakdown-inline-margin-x1: calc(var(--layout-breakdown-inline-unit) * 4);
    --layout-breakdown-inline-margin-x2: max(calc(50vw - 45rem), var(--layout-breakdown-inline-margin-x1));
}

:root {
    --layout-breakdown-block-unit: 0.25rem;
    --layout-breakdown-block-gap-x1: var(--layout-breakdown-block-unit);
    --layout-breakdown-block-gap-x2: calc(var(--layout-breakdown-block-unit) * 2);
    --layout-breakdown-block-gap-x3: calc(var(--layout-breakdown-block-unit) * 3);
    --layout-breakdown-block-gap-x4: calc(var(--layout-breakdown-block-unit) * 4);
    --layout-breakdown-block-gap-x5: calc(var(--layout-breakdown-block-unit) * 5);
    --layout-breakdown-block-gap-x6: calc(var(--layout-breakdown-block-unit) * 6);
    --layout-breakdown-block-gap-x7: calc(var(--layout-breakdown-block-unit) * 7);
    --layout-breakdown-block-gap-x8: calc(var(--layout-breakdown-block-unit) * 8);
    --layout-breakdown-block-gap-x9: calc(var(--layout-breakdown-block-unit) * 9);
    --layout-breakdown-block-gap-x16: calc(var(--layout-breakdown-block-unit) * 16);
}

body {
    margin: unset;
    overflow-x: hidden;
}