/* IMPORTS : COMPONENTS */

@import url('components/input.css'); /* fields , buttons , and other inputs */

/* FONTFACES */

@font-face {
    font-family: 'Geist';
    src: url('https://github.com/vercel/geist-font/raw/refs/heads/main/fonts/Geist/webfonts/Geist%5Bwght%5D.woff2') format('woff2');
}

/* GLOBAL STYLES */

body {
    /* appearance */
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    background-color: var(--background-primary);

    /* typography */
    font-family: var(--type-body), sans-serif;
    color: var(--label-primary);
}

:root {
    /* palette */
    --palette-banana: #FFD400;
    --palette-banana-label: #EEA600;
    --palette-honeydew: #0FD55B;
    --palette-honeydew-label: #09AB47;

    /* labels */
    --label-primary: #643B25;
    --label-secondary: #AA8365;
    --label-tertiary: #F4D5BE;

    /* backgrounds */
    --background-primary: #FFF7EC;
    --background-secondary: #F7E7DD;

    --separator: #F0DACD;

    /* typography */
    --type-headline: 'Fraunces', serif;
    --type-body: 'Geist', sans-serif;

    /* typography : scales */
    --size-headline-l: 36px;
    --height-headline-l: 40px;
    --space-headline-l: calc(var(--size-headline-l) * -0.01);

    --size-headline: 26px;
    --height-headline: 32px;
    --space-headline: calc(var(--size-headline) * -0.01);

    --size-headline-s: 20px;
    --height-headline-s: 26px;
    --space-headline-s: calc(var(--size-headline-s) * -0.01);

    --size-body: 16px;
    --height-body: 22px;

    --size-subheadline: 14px;
    --height-subheadline: 18px;

    --size-footnote: 12px;
    --height-footnote: 16px;
}

:root [data-appearance="night"] {
    /* palette */
    --palette-banana-label: #FFD400;
    --palette-honeydew-label: #0FD55B;

    /* labels */
    --label-primary: #FFF7EC;
    --label-secondary: #9FB4FE;
    --label-tertiary: #3E5297;

    /* backgrounds */
    --background-primary: #253364;
    --background-secondary: #17224B;

    --separator: #3E5297;
}

h1, h2, h3, h4, h5, h6, p {
    margin: 0;
    padding: 0;
}

h1 {
    font-family: var(--type-headline);
    font-weight: 600;
    font-size: var(--size-headline-l);
    line-height: var(--height-headline-l);
    letter-spacing: var(--space-headline-l);
    color: var(--label-primary);
}

p {
    font-family: var(--type-body);
    font-weight: 400;
    font-size: var(--size-body);
    line-height: var(--height-body);
    color: var(--label-secondary);
}

p a {
    all: unset;

    /* typography */
    color: var(--label-primary);
    text-decoration: underline;
    text-decoration-thickness: 1.44px; /* 9% */
    text-underline-offset: 1.6px; /* 10% */

    /* interaction */
    cursor: default;
}