/* Horologium — design tokens (compiled from the design system). Load the fonts first (see USING.md), then this file, then components.css. Toggle themes with or data-theme="dark". */ :root, :root[data-theme="light"] { /* colour — Daylight */ --surface-100: #f4ecdd; --surface-200: #ebe1cd; --surface-raised: #fbf7ee; --surface-ink: #211c16; --ink: #2a2118; --ink-muted: #6a5c48; --ink-subtle: #8a7a62; --on-ink: #f4ecdd; --brass: #9c7b3f; --brass-strong: #7c5f28; --oxblood: #7a2e2b; --patina: #3f6155; --brass-soft: #efe4cd; --oxblood-soft: #f0dcd3; --patina-soft: #dde6df; --line: #d3c4a6; --line-strong: #bda884; --rule-ink: #4a3d2c; /* shadows — crisp, no blur */ --shadow-raised: 1px 1px 0 0 #cbbc9d; --shadow-hover: 2px 3px 0 0 #b7a582; --shadow-panel: 3px 4px 0 0 rgba(42, 33, 24, 0.16); --shadow-inset: inset 0 0 0 1px #f7f1e5, inset 0 0 0 3px #f7f1e5; --focus-ring: 0 0 0 2px #f4ecdd, 0 0 0 3px #7c5f28; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --surface-100: #17130e; --surface-200: #201a13; --surface-raised: #262019; --surface-ink: #0f0c08; --ink: #f0e6d4; --ink-muted: #b6a488; --ink-subtle: #8a7a61; --on-ink: #f0e6d4; --brass: #c69a51; --brass-strong: #d9b473; --oxblood: #cf8077; --patina: #86b4a2; --brass-soft: #33291a; --oxblood-soft: #3a211d; --patina-soft: #1f2f2a; --line: #3a3226; --line-strong: #55492f; --rule-ink: #8a7a61; --shadow-raised: 1px 1px 0 0 #0b0906; --shadow-hover: 2px 3px 0 0 #060504; --shadow-panel: 3px 4px 0 0 rgba(0, 0, 0, 0.55); --shadow-inset: inset 0 0 0 1px #2c251b, inset 0 0 0 3px #221c14; --focus-ring: 0 0 0 2px #17130e, 0 0 0 3px #d9b473; } } :root[data-theme="dark"] { --surface-100: #17130e; --surface-200: #201a13; --surface-raised: #262019; --surface-ink: #0f0c08; --ink: #f0e6d4; --ink-muted: #b6a488; --ink-subtle: #8a7a61; --on-ink: #f0e6d4; --brass: #c69a51; --brass-strong: #d9b473; --oxblood: #cf8077; --patina: #86b4a2; --brass-soft: #33291a; --oxblood-soft: #3a211d; --patina-soft: #1f2f2a; --line: #3a3226; --line-strong: #55492f; --rule-ink: #8a7a61; --shadow-raised: 1px 1px 0 0 #0b0906; --shadow-hover: 2px 3px 0 0 #060504; --shadow-panel: 3px 4px 0 0 rgba(0, 0, 0, 0.55); --shadow-inset: inset 0 0 0 1px #2c251b, inset 0 0 0 3px #221c14; --focus-ring: 0 0 0 2px #17130e, 0 0 0 3px #d9b473; } :root { /* spacing (8px base) */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px; /* radius — near-square, classic */ --radius-sm: 2px; --radius-md: 2px; --radius-lg: 3px; --radius-xl: 5px; --radius-pill: 999px; /* type families (hosted from Google Fonts — see USING.md) */ --font-display: "Fraunces", "Hoefler Text", Georgia, serif; --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; --font-mono: "Space Mono", ui-monospace, "SFMono-Regular", Menlo, monospace; } /* type styles — apply as classes */ .display-xl { font-family: var(--font-display); font-size: 72px; line-height: 68px; font-weight: 340; letter-spacing: -0.02em; } .display-lg { font-family: var(--font-display); font-size: 52px; line-height: 54px; font-weight: 340; letter-spacing: -0.015em; } .display-md { font-family: var(--font-display); font-size: 34px; line-height: 40px; font-weight: 400; letter-spacing: -0.01em; } .quote { font-family: var(--font-display); font-size: 25px; line-height: 34px; font-weight: 380; font-style: italic; } .lead { font-family: var(--font-sans); font-size: 18px; line-height: 28px; font-weight: 400; } .body { font-family: var(--font-sans); font-size: 15px; line-height: 23px; font-weight: 400; } .body-sm { font-family: var(--font-sans); font-size: 13px; line-height: 20px; font-weight: 400; } .title { font-family: var(--font-sans); font-size: 19px; line-height: 26px; font-weight: 600; letter-spacing: -0.005em; } .label { font-family: var(--font-sans); font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: 0.14em; } /* set text-transform: uppercase in use */ .caption { font-family: var(--font-sans); font-size: 12px; line-height: 16px; font-weight: 500; } .ref { font-family: var(--font-mono); font-size: 13px; line-height: 18px; font-weight: 400; letter-spacing: 0.04em; } .ref-sm { font-family: var(--font-mono); font-size: 11px; line-height: 16px; font-weight: 400; letter-spacing: 0.06em; }