:root {
    --hue: 264;
    --hue-secondary: calc(var(--hue) + 180);
    --chroma: 0.05;
    --chroma-bg: calc(var(--chroma) * 0.5);
    --chroma-text: min(var(--chroma), 0.1);
    --chroma-action: max(var(--chroma), 0.1);
    --chroma-alert: max(var(--chroma), 0.05);
    /* bg */
    --bg-dark: oklch(0.1 var(--chroma-bg) var(--hue));
    --bg: oklch(0.15 var(--chroma-bg) var(--hue));
    --bg-light: oklch(0.2 var(--chroma-bg) var(--hue));
    --gradient: linear-gradient(0deg, var(--bg) 97%, var(--bg-light));
    --gradient-hover: linear-gradient(0deg, var(--bg), var(--bg-light));
    /* text */
    --text: oklch(0.96 var(--chroma-text) var(--hue));
    --text-muted: oklch(0.76 var(--chroma-text) var(--hue));
    /* border */
    --highlight: oklch(0.5 var(--chroma) var(--hue));
    --border: oklch(0.4 var(--chroma) var(--hue));
    --border-muted: oklch(0.3 var(--chroma) var(--hue));
    --border-card: solid 1px var(--border-muted);
    /* action */
    --primary: oklch(0.76 var(--chroma-action) var(--hue));
    --secondary: oklch(0.76 var(--chroma-action) var(--hue-secondary));
    /* alert */
    --danger: oklch(0.7 var(--chroma-alert) 30);
    --warning: oklch(0.7 var(--chroma-alert) 100);
    --success: oklch(0.7 var(--chroma-alert) 160);
    --info: oklch(0.7 var(--chroma-alert) 260);
    /* shadows */
    --shadow: 0px 2px 2px oklch(0 0 0 / 0.2), 0px 4px 4px oklch(0 0 0 / 0.1);
    /* type */
    --ff: "Manrope", sans-serif;
    --h1: 700 1.5rem/1.2em var(--ff);
    --h2: 700 1.25rem/1.2em var(--ff);
    --h3: 700 1.125rem/1.4em var(--ff);
    --h4: 700 1rem/1.6em var(--ff);
    --p: 400 1rem/1.6em var(--ff);
    --small: 400 0.75rem/1.8em var(--ff);
}
body.light {
    /* bg */
    --bg-dark: oklch(0.92 var(--chroma-bg) var(--hue));
    --bg: oklch(0.96 var(--chroma-bg) var(--hue));
    --bg-light: oklch(1 var(--chroma-bg) var(--hue));
    --gradient: linear-gradient(0deg, var(--bg) 97%, var(--bg-light));
    --gradient-hover: linear-gradient(0deg, var(--bg), var(--bg-light));
    /* text */
    --text: oklch(0.15 var(--chroma) var(--hue));
    --text-muted: oklch(0.4 var(--chroma) var(--hue));
    /* border */
    --highlight: oklch(1 var(--chroma) var(--hue));
    --border: oklch(0.6 var(--chroma) var(--hue));
    --border-muted: oklch(0.7 var(--chroma) var(--hue));
    --border-card: solid 1px var(--bg);
    /* action */
    --primary: oklch(0.4 var(--chroma-action) var(--hue));
    --secondary: oklch(0.4 var(--chroma-action) var(--hue-secondary));
    /* alert */
    --danger: oklch(0.5 var(--chroma-alert) 30);
    --warning: oklch(0.5 var(--chroma-alert) 100);
    --success: oklch(0.5 var(--chroma-alert) 160);
    --info: oklch(0.5 var(--chroma-alert) 260);
}