/* ============================================================== Tokens — brand colors, type, spacing. Light/dark themes scoped via [data-theme] on . ============================================================== */ /* @font-face declarations + base type scale live in ./assets/type.css. This file just consumes those tokens and adds layout-only tokens (palette, spacing, columns). Type tokens follow the canonical spec (display-xl..mono-meta) defined in type.css. */ :root{ /* ----- Brand palette (constant) ----- */ --off-white:#f5f3ee; --off-black:#1a1a1a; --blue:#0033ff; --blue-soft:#2a4fff; --gray:#9e9e9e; --gray-soft:#c7c7c7; /* ----- Type aliases — kept for backward compat. New code should pull from type.css's --type-* / --weight-* / --track-* tokens. */ --font-mono: var(--font-sans); --font-numerals: 'Nudica Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace; --t-base: var(--type-body-size); --t-mono: var(--type-mono-meta-size); --t-label: var(--type-mono-meta-size); --t-display: var(--type-display-l-size); --t-h2: var(--type-h2-size); --t-h3: var(--type-h3-size); --t-meta: var(--type-small-size); /* ----- Spacing (tweakable) ----- */ --space-page:clamp(1.5rem, 4vw, 3rem); --space-section:clamp(6rem, 14vw, 12rem); --space-stack:1.25rem; --gutter:2rem; /* ----- Layout ----- */ --col-narrow:38rem; --col-wide:64rem; --col-max:88rem; /* ----- Type rhythm — aliases to the canonical tokens in type.css. */ --lh-body: var(--leading-body); --lh-display: var(--leading-display-l); --ls-display: var(--track-display-l); --ls-body: var(--track-body); --ls-mono: var(--track-mono-meta); /* ----- Motion ----- */ --ease:cubic-bezier(0.22, 0.61, 0.36, 1); --dur:240ms; } /* Light theme (default) */ :root, [data-theme="light"]{ --bg:#f9f9f9; --bg-elev:#ebe7df; --fg:var(--off-black); --fg-muted:#6b6b6b; --fg-faint:#a8a4a0; --rule:rgba(26, 26, 26, 0.12); --rule-strong:rgba(26, 26, 26, 0.28); --accent:var(--blue); --accent-fg:#ffffff; --selection-bg:var(--blue); --selection-fg:var(--off-white); } /* Dark theme */ [data-theme="dark"]{ --bg:#1e1e1e; --bg-elev:#171717; --fg:#e9e6e0; --fg-muted:#9b9892; --fg-faint:#6a6864; --rule:rgba(233, 230, 224, 0.10); --rule-strong:rgba(233, 230, 224, 0.24); --accent:#5a7bff; --accent-fg:#0d0d0d; --selection-bg:#5a7bff; --selection-fg:#0d0d0d; } ::selection{ background:var(--selection-bg); color:var(--selection-fg); }