:root {
    color-scheme: light dark;
    --base-100: light-dark(#fdf0d5, #190618);
    --base-200: light-dark(#f3e2bf, #2c0c28);
    --base-foreground: light-dark(#3a3335, #eeeae4);
    --primary: light-dark(#8e2949, #e0caac);
    --secondary: light-dark(#d91c81, #af3735);
    --accent: light-dark(#b90061, #7e2a29);

    /* @link https://utopia.fyi/type/calculator?c=360,18,1.5,1240,20,1.25,2,1,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */

    --step--1: clamp(0.75rem, 0.6477rem + 0.4545vw, 1rem);
    --step-0: clamp(1.125rem, 1.0739rem + 0.2273vw, 1.25rem);
    --step-1: clamp(1.5625rem, 1.7386rem + -0.2273vw, 1.6875rem);
    --step-2: clamp(1.9531rem, 2.7678rem + -1.0511vw, 2.5313rem);

    /* @link https://utopia.fyi/space/calculator?c=360,18,1.5,1240,20,1.25,2,1,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */
    --space-3xs: clamp(0.3125rem, 0.3125rem + 0vw, 0.3125rem);
    --space-2xs: clamp(0.5625rem, 0.5369rem + 0.1136vw, 0.625rem);
    --space-xs: clamp(0.875rem, 0.8494rem + 0.1136vw, 0.9375rem);
    --space-s: clamp(1.125rem, 1.0739rem + 0.2273vw, 1.25rem);
    --space-m: clamp(1.6875rem, 1.6108rem + 0.3409vw, 1.875rem);
    --space-l: clamp(2.25rem, 2.1477rem + 0.4545vw, 2.5rem);
    --space-xl: clamp(3.375rem, 3.2216rem + 0.6818vw, 3.75rem);
    --space-2xl: clamp(4.5rem, 4.2955rem + 0.9091vw, 5rem);
    --space-3xl: clamp(6.75rem, 6.4432rem + 1.3636vw, 7.5rem);

    /* One-up pairs */
    --space-3xs-2xs: clamp(0.3125rem, 0.1847rem + 0.5682vw, 0.625rem);
    --space-2xs-xs: clamp(0.5625rem, 0.4091rem + 0.6818vw, 0.9375rem);
    --space-xs-s: clamp(0.875rem, 0.7216rem + 0.6818vw, 1.25rem);
    --space-s-m: clamp(1.125rem, 0.8182rem + 1.3636vw, 1.875rem);
    --space-m-l: clamp(1.6875rem, 1.3551rem + 1.4773vw, 2.5rem);
    --space-l-xl: clamp(2.25rem, 1.6364rem + 2.7273vw, 3.75rem);
    --space-xl-2xl: clamp(3.375rem, 2.7102rem + 2.9545vw, 5rem);
    --space-2xl-3xl: clamp(4.5rem, 3.2727rem + 5.4545vw, 7.5rem);

    /* Custom pairs */
    --space-s-l: clamp(1.125rem, 0.5625rem + 2.5vw, 2.5rem);
    
}

[data-theme=light] {
    color-scheme: light;
}

[data-theme=dark] {
    color-scheme: dark;
}

body {
    font-size: var(--step-0);
    background-color: var(--base-100);
    color: var(--base-foreground);
    font-family: system-ui;
}

h1, h2, h3 {
    color: var(--primary);
    xcolor: #4c1e48;
}

h1 {
    font-size: var(--step-2)
}

h2, th {
    font-size: var(--step-1)
}

tr:nth-child(odd) {
    td {
	background-color: var(--base-200);
    }
}

a:link {
    color: var(--secondary);
}

a:visited {
    color: var(--accent);
}

.card {
}

dl {
    background: var(--base-200);
    padding: var(--space-s);
    display: grid;
    grid-template-columns: min-content 1fr;
    grid-gap: var(--space-xs);
}

dt {
    font-weight: bold;
}

dd {
    margin-left: 0;
}