:root {
    /* Colors */
    --color-primary: #0E0A08;
    --color-secondary: #FFF6EB;
    --color-tertiary: #EA5E2B;
    --color-quaternary: #FFFFFF;

    /* Typography */
    --font-base: "Roboto", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    --font-mono: "Roboto Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

    /* Layout */
    --container-width: 1220px;
    --page-padding-x: 16px;

    --transition-fast: 180ms ease-out;

    --overlay: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1' height='512' viewBox='0 0 1 512'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1' gradientUnits='objectBoundingBox'%3E%3Cstop offset='0%25' stop-color='rgb(14,10,8)' stop-opacity='0'/%3E%3Cstop offset='70%25' stop-color='rgb(14,10,8)' stop-opacity='0.08'/%3E%3Cstop offset='85%25' stop-color='rgb(14,10,8)' stop-opacity='0.35'/%3E%3Cstop offset='95%25' stop-color='rgb(14,10,8)' stop-opacity='0.75'/%3E%3Cstop offset='100%25' stop-color='rgb(14,10,8)' stop-opacity='1'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='1' height='512' fill='url(%23g)' color-interpolation='sRGB'/%3E%3C/svg%3E");
}


/* Reset-ish */
*,
*::before,
*::after {
    box-sizing: border-box;
}