:root {

    /* Typographic scale */
    --step--1: clamp(0.83rem, calc(0.82rem + 0.08vw), 0.88rem);
    --step-0: clamp(1.00rem, calc(0.92rem + 0.39vw), 1.25rem);
    --step-1: clamp(1.20rem, calc(1.02rem + 0.88vw), 1.77rem);
    --step-2: clamp(1.44rem, calc(1.11rem + 1.65vw), 2.50rem);
    --step-3: clamp(1.73rem, calc(1.17rem + 2.80vw), 3.53rem);
    --step-4: clamp(2.07rem, calc(1.17rem + 4.54vw), 5.00rem);
    --step-5: clamp(2.49rem, calc(1.07rem + 7.11vw), 7.07rem);
    --step-6: clamp(2.99rem, calc(0.81rem + 10.88vw), 9.99rem);
    --font-polaroid: clamp(0.75rem, 0.5rem + 1vi, 1.25rem);

    /* Spacing scale */
    --space-3xs: clamp(0.3125rem, 0.3125rem + 0vw, 0.3125rem);
    --space-2xs: clamp(0.625rem, 0.625rem + 0vw, 0.625rem);
    --space-xs: clamp(0.9375rem, 0.9375rem + 0vw, 0.9375rem);
    --space-s: clamp(1.25rem, 1.25rem + 0vw, 1.25rem);
    --space-m: clamp(1.875rem, 1.875rem + 0vw, 1.875rem);
    /* --space-l: clamp(0, 2.5rem + 0vw, 2.5rem); */
    --space-l: clamp(0rem, -6.94rem + 13.89vi, 2.5rem);
    --space-xl: clamp(3.75rem, 3.75rem + 0vw, 3.75rem);
    --space-2xl: clamp(5rem, 5rem + 0vw, 5rem);
    --space-3xl: clamp(7.5rem, 7.5rem + 0vw, 7.5rem);
    --space-polaroid: clamp(0.625rem, 0.35rem + 1.1vi, 1.5rem);

}


/* Light theme (default) */
:root {
    /* Foreground */
    --fg-1-1: #FFF145;
    --fg-1-2: #F9E700;
    --fg-1-3: #F0DE00;
    --fg-2: #C3B400;
    --fg-3: #9E9200;
    --fg-4-5: #7E7400;
    --fg-6: #686100;
    --fg-7: #5E5600;
    --fg-8: #544E00;
    --fg-9: #4C4600;
    --fg-11: #3E3900;
    --fg-13: #312E00;

    /* Surface */
    --surface-0: #F8F8F1;

    /* On White */

    --fg-neutral-6: #5D5D5D;

    /* Special */
    --almostWhite: #f9f9f9;
}

/* Dark theme */
[data-theme="dark"] {
    /* Foreground */
    --fg-1-1: #1B1900;
    --fg-1-2: #242100;
    --fg-1-3: #2B2800;
    --fg-2: #4B4500;
    --fg-3: #675F00;
    --fg-4-5: #857B00;
    --fg-6: #9C9100;
    --fg-7: #AA9D00;
    --fg-8: #B6A800;
    --fg-9: #C1B300;
    --fg-11: #D5C500;
    --fg-13: #E7D600;

    /* Surface */
    --surface-0: #0E0D00;
}

body {
    font-size: var(--step-1);
    font-family: "Inclusive Sans", sans-serif;
    background: var(--surface-0);
    color: var(--fg-4-5);
}

h1,
h2,
h3,
h4,
h5,
h5 {
    color: var(--fg-7);
}

h1 {
    font-size: var(--step-6);
    font-family: "Inria Serif", serif;
}

h2 {
    font-size: var(--step-5);
    font-family: "Inria Serif", serif;
}

h3 {
    font-size: var(--step-4);
}

h4 {
    font-size: var(--step-3);
}

p,
h1,
h2,
h3,
h4,
h5,
h6,
li,
figcaption {
    max-inline-size: 60ch;
}

* {
    max-inline-size: 60ch;
}

html,
body,
div,
header,
nav,
main,
footer {
    max-inline-size: none;
}

iframe {
    width: 100%;
    height: 100%;
    border: 0;
    aspect-ratio: 16 / 9;

}

section {
    width: 100%;
}

time {
    color: var(--fg-4-5);
}