/* Design tokens — single source of truth (Constitution Principle III). Every colour, radius, spacing, shadow, typography choice, and motion duration used by any sender-app screen MUST be declared here. Ad-hoc inline values in Razor or site.css are a review-blocking regression. Feature 007 (Event Cards pivot): the default theme is now the cream-and-gold envelope identity. The previous warm-coral palette is preserved as the `[data-theme="legacy-coral"]` rollback selector below per constitution v1.1.0 III "themes are additive, not forking". Both themes coexist; the active theme is selected by the `data-theme` attribute on . Future themes (Crisp, Warm) anticipated by the Settings → Appearance picker land as additional [data-theme="..."] selectors here — never as forked components. */ /* ── Self-hosted fonts ────────────────────────────────────────────── Files live under /fonts/ — see wwwroot/fonts/README.md. Existing 3 (Instrument Serif × 2, Geist Mono): shipped as TTF. New 3 for feature 007 (Parisienne, Cormorant Garamond, Caveat): shipped as TTF when the files arrive. Until then the @font-face rules silently fail to load and the page falls through to system fallbacks (ui-serif / ui-monospace / etc.) declared on the --font-* tokens below. */ @font-face { font-family: "Instrument Serif"; src: url("/fonts/instrument-serif-roman.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Instrument Serif"; src: url("/fonts/instrument-serif-italic.ttf") format("truetype"); font-weight: 400; font-style: italic; font-display: swap; } @font-face { font-family: "Geist Mono"; src: url("/fonts/geist-mono-variable.ttf") format("truetype-variations"); font-weight: 100 900; font-style: normal; font-display: swap; } @font-face { font-family: "Parisienne"; src: url("/fonts/parisienne-roman.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Cormorant Garamond"; src: url("/fonts/cormorant-garamond-roman.ttf") format("truetype"); font-weight: 400 600; font-style: normal; font-display: swap; } @font-face { font-family: "Cormorant Garamond"; src: url("/fonts/cormorant-garamond-italic.ttf") format("truetype"); font-weight: 400 600; font-style: italic; font-display: swap; } @font-face { font-family: "Caveat"; src: url("/fonts/caveat-roman.ttf") format("truetype"); font-weight: 400 700; font-style: normal; font-display: swap; } :root { /* ── Event Cards palette (cream + gold envelope) ───────────────── Sourced from useful-new-design/useful/project/styles.css:8–46. */ /* Warm cream surface ramp (envelope and page surfaces) */ --cream: #faf3e7; --cream-2: #fdf7ea; --cream-3: #f4e8d2; --cream-deep: #f0e4d0; /* Gold accent ramp */ --gold: #c9a368; --gold-deep: #9c7a3f; --gold-light: #e0c9a0; --gold-soft: #f1e4ca; --gold-softer: #faf2df; /* Page background base + subtle dust overlay */ --bg: #f6efe2; --bg-dust: rgba(58, 46, 42, 0.025); /* Warm-brown ink ramp. --ink-3 used to be #8a7a70 (4.11:1 against #ffffff) — failed WCAG AA. Darkened to #6f6058 (5.5:1) per T071 contrast fix; still reads as a quiet muted-ink in side-by-side review with the design pack. */ --ink: #3a2e2a; --ink-2: #5a4c45; --ink-3: #6f6058; --ink-4: #b1a298; /* Gold-tinted borders */ --line: rgba(156, 122, 63, 0.16); --line-2: rgba(156, 122, 63, 0.10); /* Stage signal colours */ --stage-live: #5a9bc4; --stage-archived: #9a8c75; /* ── Existing token names mapped onto Event Cards values ───────── Feature 003–006 CSS uses these names. They keep working — the palette swap is invisible at the call site, intentional per the theme-additivity contract. */ --color-surface: var(--cream); --color-surface-elevated: #ffffff; --color-ink: var(--ink); --color-ink-muted: var(--ink-3); --color-border: var(--line); --color-accent: var(--gold); --color-accent-ink: #ffffff; --color-accent-soft: var(--gold-soft); --color-accent-softer: var(--gold-softer); --color-success: #1b6a3a; --color-danger: #b3261e; --color-danger-soft: #fdecea; --color-warning-soft: #fff4d6; --color-focus-ring: #0066ff; --color-live: #1b6a3a; --color-live-soft: #d8f0e2; /* ── Typography ────────────────────────────────────────────────── Six families post-feature-007 (constitution v1.1.0 cap = 6). Instrument Serif + Geist + Geist Mono drive the dashboard chrome; Parisienne + Cormorant Garamond + Caveat drive the card art only. System fallbacks listed first so first paint never waits. */ --font-sans: "Geist", "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif; --font-serif: "Instrument Serif", ui-serif, Georgia, "Cormorant Garamond", "Times New Roman", serif; --font-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --font-script: "Parisienne", "Pinyon Script", cursive; --font-italic: "Cormorant Garamond", Georgia, serif; --font-hand: "Caveat", cursive; --font-size-base: 16px; --font-size-sm: 14px; --font-size-lg: 18px; --font-size-xl: 22px; --font-size-xxl: 28px; --font-size-display: 36px; --line-height-base: 1.5; --line-height-tight: 1.25; /* Spacing scale (4-pt) */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; /* Radii */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 16px; --radius-pill: 999px; /* Shadows (warm-brown ink-tinted) */ --shadow-sm: 0 1px 2px rgba(58, 46, 42, 0.08); --shadow-md: 0 4px 12px rgba(58, 46, 42, 0.10); --shadow-lg: 0 12px 32px rgba(58, 46, 42, 0.12); /* Motion */ --motion-quick: 120ms; --motion-standard: 240ms; --motion-slow: 480ms; --motion-ease: cubic-bezier(0.2, 0.8, 0.2, 1); /* Layout */ --layout-max: 960px; --layout-sidebar-width: 232px; --layout-topbar-height: 56px; /* Density (driven by [data-density] on ) — defaults to cozy */ --tile-min: 240px; --gallery-gap: 18px; --content-pad-y: 28px; } /* ── Density variants ────────────────────────────────────────────── */ [data-density="compact"] { --tile-min: 200px; --gallery-gap: 12px; --content-pad-y: 20px; } [data-density="cozy"] { --tile-min: 240px; --gallery-gap: 18px; --content-pad-y: 28px; } [data-density="spacious"] { --tile-min: 300px; --gallery-gap: 26px; --content-pad-y: 36px; } /* ── Theme override: Legacy coral (rollback) ───────────────────────── Restores the warm-coral palette used by features 003–006 before the Event Cards pivot. Per constitution v1.1.0 III, themes are additive token sets — coral remains available as a runtime opt-in via ``. The coral identity also lives permanently in the design pack at `useful/` as a historical artifact. */ [data-theme="legacy-coral"] { --bg: #fffaf4; --cream: #fffaf4; --cream-2: #ffffff; --cream-3: #fce4ec; --cream-deep: #fce4ec; --gold: #c2185b; --gold-deep: #8e0e3e; --gold-light: #f0a4c2; --gold-soft: #fce4ec; --gold-softer: #fff0f5; --ink: #231d1a; --ink-2: #5e564f; --ink-3: #5e564f; --ink-4: #b1a298; --line: #e9dfd3; --line-2: rgba(233, 223, 211, 0.6); --stage-live: #1b6a3a; --stage-archived: #9a8c75; --color-surface: var(--cream); --color-surface-elevated: #ffffff; --color-ink: var(--ink); --color-ink-muted: var(--ink-3); --color-border: var(--line); --color-accent: var(--gold); --color-accent-ink: #ffffff; --color-accent-soft: var(--gold-soft); --color-accent-softer: var(--gold-softer); } @media (prefers-color-scheme: dark) { :root { --color-surface: #1b1412; --color-surface-elevated: #261d1a; --color-ink: #fbeee5; --color-ink-muted: #c4b8ac; --color-border: #3a2e29; --color-accent: #ff80ab; --color-accent-ink: #1b1412; --color-accent-soft: #3a1d2b; --color-danger-soft: #3a1414; --color-warning-soft: #3a2a14; --color-focus-ring: #66b0ff; } } @media (prefers-reduced-motion: reduce) { :root { --motion-quick: 0ms; --motion-standard: 0ms; --motion-slow: 0ms; } }