/* Copyright © 2026 Tyler Schroeder. All rights reserved. Third-party and open source components remain under their respective licenses; see LICENSE.md for details. */ /* ───────────────────────────────────────────────────────────────────── Tyler Schroeder — Design System Tokens Palette + type lifted from tylerschroeder.net (_sass/_variables.scss); accent ramp pivoted from olive/lime to a single ink/paper accent — restraint as the design choice. Ink for light surfaces, paper for dark. Type from Adobe Fonts (Typekit kit feh5iwm). ──────────────────────────────────────────────────────────────────── */ @import "https://use.typekit.net/feh5iwm.css"; :root { /* ── CORE NEUTRALS ───────────────────────────────────────────── */ --black: #101012; --white: #fff; --gray: #5a5a5a; --gray-light: #adabac; --gray-lighter: #d4d3d3; --border-subtle: rgba(90, 90, 90, 0.3); /* Theme-stable paper literals — for surfaces that stay dark in both themes (nav, footer, sidebar, dark callouts, code blocks, hero image holders). Not remapped in the dark-mode block, so var(--paper) references inside those scopes can be locally re-pointed at these. */ --paper-fixed: #fafaf7; --paper-deep-fixed: #f2f2ee; /* Light-mode page surfaces — subtle off-white, near-black ink */ --paper: var(--paper-fixed); --paper-deep: var(--paper-deep-fixed); --paper-edge: var(--gray-lighter); --paper-edge-strong: #888; --ink: var(--black); --ink-soft: #2a2a2c; --ink-muted: var(--gray); --ink-faint: #6e6e6e; /* WCAG AA — 4.59:1 on paper */ /* ── DARK MODE PALETTE ──────────────────────────────────────── */ --dark-bg: #18181b; --dark-bg-elevated: #1e1e22; --dark-text: #c8c8c8; --dark-text-bright: #f0eff0; --dark-border: #2e2e33; --dark-border-strong: #686870; /* Deep-ink surface aliases */ --ink-deep: var(--dark-bg); --ink-deep-2: var(--dark-bg-elevated); --ink-deep-3: var(--dark-border); /* ── ACCENT — Ink & Paper ──────────────────────────────────── Light-mode primary #3a3a3a — ink-accent 11.4 : 1 on #fff (AAA) Light-mode deep #1f1f1f — pressed 16.5 : 1 on #fff (AAA) Dark-mode vivid #c4bdb0 — paper-vivid 9.5 : 1 on #18181b (AAA) Tint wash #ebe7df — selection / quiet plates ──────────────────────────────────────────────────────────── */ --ink-accent: #3a3a3a; --ink-accent-deep: #1f1f1f; --paper-vivid: #c4bdb0; --paper-tint: #ebe7df; --paper-warm: #f3f0e9; /* Semantic accent aliases — use these in components */ --accent: var(--ink-accent); --accent-deep: var(--ink-accent-deep); --accent-vivid: var(--paper-vivid); --accent-tint: var(--paper-tint); --accent-wash: var(--paper-warm); /* ── SEMANTIC STATUS (kept neutral) ─────────────────────────── */ --note: #5b4b2a; --note-bg: #f0e8d0; --warn: #7a3a14; --warn-bg: #f3e2d2; --ok: #2e5238; --ok-bg: #dde7dd; /* ── TYPE FAMILIES ──────────────────────────────────────────── */ --serif-display: "garamond-premier-pro-display", "Garamond Premier Pro Display", "EB Garamond", georgia, serif; --serif-subhead: "garamond-premier-pro-subhead", "Garamond Premier Pro Subhead", "EB Garamond", georgia, serif; --serif-text: "garamond-premier-pro", "Garamond Premier Pro", georgia, "Times New Roman", serif; --serif-caption: "garamond-premier-pro-caption", "Garamond Premier Pro Caption", georgia, serif; --sans: "akzidenz-grotesk-next-conden", "akzidenz-grotesk-next-pro", "Akzidenz-Grotesk", -apple-system, "Helvetica Neue", helvetica, arial, sans-serif; --mono: "courier-prime", ui-monospace, "Courier New", courier, monospace; --display-accent: "professor", "Garamond Premier Pro Display", georgia, serif; /* ── TYPE SCALE ─────────────────────────────────────────────── */ --t-xs: 13px; --t-sm: 15px; --t-base: 18px; --t-lg: 22px; --t-h6: 20px; --t-h5: 24px; --t-h4: 30px; --t-h3: 38px; --t-h2: 52px; --t-h1: 72px; --t-display: 104px; --lh-tight: 1.1; --lh-snug: 1.25; --lh-base: 1.55; --lh-prose: 1.7; /* ── SPACING — 8pt grid ─────────────────────────────────────── */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px; /* ── RADII ──────────────────────────────────────────────────── */ --r-0: 0; --r-1: 2px; --r-2: 4px; --r-3: 8px; --r-pill: 999px; /* ── SHADOWS ────────────────────────────────────────────────── */ --shadow-1: 0 1px 2px rgba(16, 16, 18, 0.06), 0 1px 1px rgba(16, 16, 18, 0.04); --shadow-2: 0 4px 12px rgba(16, 16, 18, 0.06), 0 2px 4px rgba(16, 16, 18, 0.04); --shadow-3: 0 12px 32px rgba(16, 16, 18, 0.08), 0 4px 8px rgba(16, 16, 18, 0.05); --shadow-ink: 0 2px 0 var(--ink); /* ── MOTION ─────────────────────────────────────────────────── */ --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1); --ease-in: cubic-bezier(0.4, 0, 1, 1); --ease-std: cubic-bezier(0.4, 0, 0.2, 1); --dur-fast: 120ms; --dur-base: 200ms; --dur-slow: 400ms; /* ── LAYOUT ─────────────────────────────────────────────────── */ --bp-xs: 320px; --bp-sm: 400px; --bp-md: 640px; --bp-lg: 781px; --bp-xl: 800px; --bp-2xl: 860px; --bp-3xl: 1000px; --bp-4xl: 1021px; --bp-5xl: 1160px; --measure-prose: 68ch; --measure-narrow: 52ch; --container: 1200px; --container-narrow: 720px; } /* ── DARK MODE OVERRIDES ───────────────────────────────────────── Remap surface / ink / accent tokens so every component that reads var(--paper), var(--ink), etc. flips on its own without per-rule overrides. The dark footer surface tokens (--ink-deep*) stay the same in both modes because the footer is intentionally always dark. ──────────────────────────────────────────────────────────────── */ :root[data-theme="dark"] { --paper: var(--dark-bg); --paper-deep: var(--dark-bg-elevated); --paper-edge: var(--dark-border); --paper-edge-strong: var(--dark-border-strong); --paper-warm: var(--dark-bg-elevated); --paper-tint: #2a2a2c; --ink: var(--dark-text-bright); --ink-soft: var(--dark-text); --ink-muted: #9a9a9a; --ink-faint: #888; /* WCAG AA — 5.12:1 on ink-deep */ --ink-accent: var(--paper-vivid); --ink-accent-deep: #d4cdc0; --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-2: 0 4px 12px rgba(0, 0, 0, 0.45); --shadow-3: 0 12px 32px rgba(0, 0, 0, 0.5); --shadow-ink: 0 2px 0 var(--ink); }