:root {
/* color */
--color-ink: #23241F;   /* primary text */
--color-ink-soft: #55564C;  /* secondary text */
--color-ink-inverse: #F2EEE4;  /* text on dark background */

--color-paper: #EAEFF1;   /* page background */
--color-paper-raised: #DCE4E7; /* cards / widgets on top of paper */

--color-deep: #1F2933;   /* banner & footer background */
--color-deep-text: #F2EEE4;   /* text on the deep background */

--color-accent: #333F55;   /* links, buttons */
--color-accent-hover: #242F40;
--color-accent-secondary: #B98A2E;   /* secondary accent — tags, highlights */
--color-line: #D8DACB;   /* hairlines / dividers */

/* type */
--font-display: "Retron2000", Georgia, serif;
--font-body: "Roboto", "Segoe UI", sans-serif;

--step-0: clamp(1rem, 0.95rem + 0.25vw, 1.05rem);
--step-1: clamp(1.15rem, 1.05rem + 0.5vw, 1.3rem);
--step-2: clamp(1.4rem, 1.2rem + 1vw, 1.75rem);
--step-3: clamp(1.9rem, 1.5rem + 2vw, 2.6rem);
--step-4: clamp(2.4rem, 1.8rem + 3vw, 3.4rem);

/* layout */
--content-width: 1320px;
--radius: 6px;
}