/* GENERATED by scripts/sync-design.mjs from design/tokens.css + design/fonts/fonts.css + design/interactive/components.css. Never edit by hand: edit the design/ source and re-run `node scripts/sync-design.mjs`. */ /* GENERATED by design/render.mjs from design/tokens.json. Never edit by hand. Semantic tokens only in app code; primitives exist here for the semantics to reference (audit.mjs enforces). Theme: system preference by default; an explicit choice stamps data-theme="light|dark" on (shared key: designSpecTheme). */ :root { --color-primitive-parchment-0: #FFFFFF; --color-primitive-parchment-1: #FDFAF2; --color-primitive-parchment-2: #F8F3E9; --color-primitive-parchment-3: #F1EADB; --color-primitive-parchment-4: #E8DECA; --color-primitive-parchment-5: #E3D9C6; --color-primitive-parchment-6: #A99E86; --color-primitive-parchment-7: #8B8066; --color-primitive-parchment-8: #6E6353; --color-primitive-parchment-9: #52493C; --color-primitive-parchment-10: #3A342A; --color-primitive-parchment-11: #241E16; --color-primitive-parchment-12: #191510; --color-primitive-oxblood-1: #F4E8E0; --color-primitive-oxblood-2: #E5CCC2; --color-primitive-oxblood-3: #C99384; --color-primitive-oxblood-7: #7E332B; --color-primitive-oxblood-8: #632119; --color-primitive-ember-4: #CE8560; --color-primitive-ember-6: #9E4E2E; --color-primitive-ember-7: #833C20; --color-primitive-night-page: #211B14; --color-primitive-night-card: #292217; --color-primitive-night-sunken: #15110B; --color-primitive-night-ink: #EFE6D6; --color-primitive-night-soft: #CDC1AB; --color-primitive-night-muted: #A79B84; --color-primitive-green-1: #E9F0E9; --color-primitive-green-6: #3E7D54; --color-primitive-green-7: #2C5F3E; --color-primitive-gold-1: #F5ECD2; --color-primitive-gold-3: #E9C15B; --color-primitive-gold-6: #8A6A14; --color-primitive-gold-7: #6B5310; --color-primitive-red-1: #FBEAE6; --color-primitive-red-6: #B3372F; --color-primitive-red-7: #93261F; --color-surface-page: #F8F3E9; --color-surface-card: #FDFAF2; --color-surface-subtle: #F1EADB; --color-surface-sunken: #E8DECA; --color-surface-scrim: rgba(36,30,22,.48); --color-text-primary: #241E16; --color-text-secondary: #52493C; --color-text-subtle: #6E6353; --color-text-disabled: #A99E86; --color-text-inverse: #FFFFFF; --color-text-brand: #7E332B; --color-text-action: #7E332B; --color-border-subtle: #E3D9C6; --color-border-control: #8B8066; --color-border-strong: #3A342A; --color-border-focus: #7E332B; --color-action-primary: #7E332B; --color-action-primary-hover: #632119; --color-action-primary-text: #FFFFFF; --color-action-secondary: #FDFAF2; --color-action-secondary-hover: #241E16; --color-action-secondary-text: #241E16; --color-action-hover-wash: rgba(110,99,83,.10); --color-action-pressed-wash: rgba(110,99,83,.18); --color-action-destructive: #FDFAF2; --color-action-destructive-text: #B3372F; --color-state-selected-bg: #F4E8E0; --color-state-selected-border: #7E332B; --color-state-selected-text: #632119; --color-state-modified: #8A6A14; --color-state-modified-bg: #F5ECD2; --color-state-modified-text: #6B5310; --color-feedback-error: #B3372F; --color-feedback-error-bg: #FBEAE6; --color-feedback-warning: #6B5310; --color-feedback-warning-bg: #F5ECD2; --color-feedback-success: #2C5F3E; --color-feedback-success-bg: #E9F0E9; --font-display: "Fraunces", "Iowan Old Style", Georgia, serif; --font-body: "Fira Sans", "Avenir Next", "Segoe UI", system-ui, sans-serif; --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace; --font-size-caption: 13px; --font-size-small: 14px; --font-size-body: 17px; --font-size-reading: 18px; --font-size-title: 19px; --font-size-heading: 22px; --font-size-display: 30px; --line-height-tight: 1.15; --line-height-snug: 1.35; --line-height-body: 1.6; --line-height-reading: 1.72; --font-weight-regular: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --letter-spacing-normal: 0; --letter-spacing-caps: 0.04em; --letter-spacing-wide: 0.1em; --space-3xs: 2px; --space-2xs: 4px; --space-xs: 8px; --space-sm: 12px; --space-md: 16px; --space-lg: 24px; --space-xl: 32px; --space-2xl: 48px; --space-3xl: 64px; --radius-chip: 4px; --radius-control: 4px; --radius-surface: 4px; --radius-pill: 999px; --border-width-hairline: 1px; --border-width-marker: 2px; --border-width-focus: 2px; --size-target-min: 24px; --size-control-sm: 36px; --size-control-md: 48px; --size-control-lg: 52px; --size-row-min: 48px; --size-icon-sm: 16px; --size-icon-md: 20px; --size-icon-lg: 24px; --size-measure-read: 66ch; --size-wrap: 1120px; --size-focus-offset: 2px; --shadow-raised: 0 1px 2px 0 rgba(36,30,22,.05); --shadow-panel: 0 2px 8px 0 rgba(36,30,22,.07); --shadow-overlay: 0 12px 32px 0 rgba(36,30,22,.16); --duration-instant: 80ms; --duration-fast: 120ms; --duration-base: 180ms; --duration-slow: 240ms; --easing-standard: 0.2, 0, 0, 1; --easing-enter: 0.2, 0.7, 0.3, 1; --easing-exit: 0.4, 0, 1, 1; --breakpoint-compact: 640px; --breakpoint-regular: 1024px; --breakpoint-wide: 1440px; --z-stage: 0; --z-rail: 10; --z-header: 20; --z-popover: 30; --z-modal: 40; --z-toast: 50; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --color-surface-page: #211B14; --color-surface-card: #292217; --color-surface-subtle: rgba(255,255,255,.05); --color-surface-sunken: #15110B; --color-surface-scrim: rgba(0,0,0,.55); --color-text-primary: #EFE6D6; --color-text-secondary: #CDC1AB; --color-text-subtle: #A79B84; --color-text-disabled: #7A6E5D; --color-text-brand: #CE8560; --color-text-action: #CE8560; --color-border-subtle: rgba(255,255,255,.09); --color-border-control: rgba(255,255,255,.40); --color-border-strong: rgba(255,255,255,.55); --color-border-focus: #CE8560; --color-action-primary: #9E4E2E; --color-action-primary-hover: #833C20; --color-action-primary-text: #FFF6EC; --color-action-secondary: #292217; --color-action-secondary-hover: #CDC1AB; --color-action-secondary-text: #EFE6D6; --color-action-hover-wash: rgba(255,255,255,.055); --color-action-pressed-wash: rgba(255,255,255,.09); --color-action-destructive: #292217; --color-action-destructive-text: #FF6B5E; --color-state-selected-bg: rgba(206,133,96,.16); --color-state-selected-border: #CE8560; --color-state-selected-text: #EFE6D6; --color-state-modified: #E9C15B; --color-state-modified-bg: rgba(233,193,91,.15); --color-state-modified-text: #E9C15B; --color-feedback-error: #FF6B5E; --color-feedback-error-bg: rgba(255,107,94,.14); --color-feedback-warning: #E9C15B; --color-feedback-warning-bg: rgba(233,193,91,.15); --color-feedback-success: #7FC796; --color-feedback-success-bg: rgba(127,199,150,.15); } } [data-theme="dark"] { --color-surface-page: #211B14; --color-surface-card: #292217; --color-surface-subtle: rgba(255,255,255,.05); --color-surface-sunken: #15110B; --color-surface-scrim: rgba(0,0,0,.55); --color-text-primary: #EFE6D6; --color-text-secondary: #CDC1AB; --color-text-subtle: #A79B84; --color-text-disabled: #7A6E5D; --color-text-brand: #CE8560; --color-text-action: #CE8560; --color-border-subtle: rgba(255,255,255,.09); --color-border-control: rgba(255,255,255,.40); --color-border-strong: rgba(255,255,255,.55); --color-border-focus: #CE8560; --color-action-primary: #9E4E2E; --color-action-primary-hover: #833C20; --color-action-primary-text: #FFF6EC; --color-action-secondary: #292217; --color-action-secondary-hover: #CDC1AB; --color-action-secondary-text: #EFE6D6; --color-action-hover-wash: rgba(255,255,255,.055); --color-action-pressed-wash: rgba(255,255,255,.09); --color-action-destructive: #292217; --color-action-destructive-text: #FF6B5E; --color-state-selected-bg: rgba(206,133,96,.16); --color-state-selected-border: #CE8560; --color-state-selected-text: #EFE6D6; --color-state-modified: #E9C15B; --color-state-modified-bg: rgba(233,193,91,.15); --color-state-modified-text: #E9C15B; --color-feedback-error: #FF6B5E; --color-feedback-error-bg: rgba(255,107,94,.14); --color-feedback-warning: #E9C15B; --color-feedback-warning-bg: rgba(233,193,91,.15); --color-feedback-success: #7FC796; --color-feedback-success-bg: rgba(127,199,150,.15); } /* Self-hosted faces, subsetted to latin with ALL layout features kept. CRITICAL: Fira Sans's true small caps live in GSUB smcp/c2sc. Any re-subsetting MUST pass --layout-features='*' (or +=smcp,c2sc) or the SC glyphs are silently dropped and font-variant-caps falls back to synthesized fakes. */ @font-face { font-family: 'Fraunces'; font-style: normal; font-weight: 100 900; font-display: swap; src: url(Fraunces-var.woff2) format('woff2'); } @font-face { font-family: 'Fraunces'; font-style: italic; font-weight: 100 900; font-display: swap; src: url(Fraunces-Italic-var.woff2) format('woff2'); } @font-face { font-family: 'Fira Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url(FiraSans-Regular.woff2) format('woff2'); } @font-face { font-family: 'Fira Sans'; font-style: italic; font-weight: 400; font-display: swap; src: url(FiraSans-Italic.woff2) format('woff2'); } @font-face { font-family: 'Fira Sans'; font-style: normal; font-weight: 500; font-display: swap; src: url(FiraSans-Medium.woff2) format('woff2'); } @font-face { font-family: 'Fira Sans'; font-style: normal; font-weight: 600; font-display: swap; src: url(FiraSans-SemiBold.woff2) format('woff2'); } /* design/interactive/components.css: the REFERENCE IMPLEMENTATION of every component in the spec. Inlined into styleguide.html so the examples are real, working controls; written so the app (Hono JSX, CSS-in-TS strings) can adopt it wholesale. Semantic tokens only; audit.mjs rules. Class prefix sm- (Shepherd's Message). Native elements first: details/summary, radio, checkbox, range; components.js only where HTML alone cannot. Cursor doctrine (audit.mjs enforces per family): clicked things take `pointer` (buttons, selects, checks, radios, chips, summaries, range); a text field keeps its caret; disabled goes back to `default`. */ /* ---------- box model ---------- */ .sm-demo, .sm-demo *, [class*="sm-"], [class*="sm-"] * { box-sizing: border-box; } /* ---------- focus: one ring everywhere ---------- Ring sits OUTSIDE a focus-offset gap so it survives on fills of its own colour. */ [class*="sm-"]:focus-visible, .sm-demo :focus-visible { outline: var(--border-width-focus) solid var(--color-border-focus); outline-offset: var(--size-focus-offset); } /* ---------- type utilities ---------- */ /* True small caps: Fira Sans smcp/c2sc. NEVER apply to the display face. */ .sm-sc { font-variant-caps: small-caps; letter-spacing: var(--letter-spacing-caps); } /* Letterspaced-uppercase micro-label (TRANSCRIPT, ABOUT THIS RECORDING). */ .sm-microlabel { font-family: var(--font-body); font-size: var(--font-size-caption); font-weight: var(--font-weight-semibold); letter-spacing: var(--letter-spacing-wide); text-transform: uppercase; color: var(--color-text-subtle); } /* ---------- buttons ---------- */ .sm-btn { font-family: var(--font-body); font-size: var(--font-size-body); font-weight: var(--font-weight-semibold); display: inline-flex; align-items: center; justify-content: center; gap: var(--space-xs); min-height: var(--size-control-md); padding: 0 var(--space-md); border-radius: var(--radius-control); cursor: pointer; border: var(--border-width-hairline) solid transparent; background: none; color: var(--color-text-primary); transition: background var(--duration-fast), border-color var(--duration-fast), color var(--duration-fast), transform var(--duration-fast); } .sm-btn:active { transform: translateY(1px); } /* the press, Phase 1 motion */ .sm-btn:disabled { cursor: default; pointer-events: none; color: var(--color-text-disabled); border-color: var(--color-border-subtle); background: var(--color-surface-subtle); } /* In flight: NO spinner exists in this system (motion.md: nothing loops). A busy button keeps its fill and width, refuses input, and its LABEL says what is happening ("Publish" → "Publishing…"). Reserve width with min-width if the progressive verb runs longer. */ .sm-btn[aria-busy="true"] { cursor: default; pointer-events: none; } .sm-btn svg { flex: none; } .sm-btn--primary { background: var(--color-action-primary); color: var(--color-action-primary-text); border-color: var(--color-action-primary-hover); } .sm-btn--primary:hover { background: var(--color-action-primary-hover); } .sm-btn--lg { min-height: var(--size-control-lg); font-size: var(--font-size-title); padding: 0 var(--space-lg); } .sm-btn--sm { min-height: var(--size-control-sm); font-size: var(--font-size-small); padding: 0 var(--space-sm); } /* Quiet: cream fill, ink label, control edge at rest (the edge IS the affordance: Principle 3, buttons look like buttons); hover washes and strengthens the edge. */ .sm-btn--quiet { background: var(--color-action-secondary); color: var(--color-action-secondary-text); border-color: var(--color-border-control); font-weight: var(--font-weight-medium); } .sm-btn--quiet:hover { border-color: var(--color-action-secondary-hover); background: var(--color-action-hover-wash); } /* Link-button: for inline acts inside prose/metadata only. */ .sm-btn--link { color: var(--color-text-action); min-height: var(--size-target-min); padding: 0 var(--space-2xs); font-weight: var(--font-weight-medium); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--color-border-subtle); } .sm-btn--link:hover { text-decoration-color: currentColor; } /* Destructive: outlined; never a red fill (red reports, it does not do identity). */ .sm-btn--destructive { background: var(--color-action-destructive); color: var(--color-action-destructive-text); border-color: var(--color-action-destructive-text); } .sm-btn--destructive:hover { background: var(--color-feedback-error-bg); } /* ---------- fields ---------- */ .sm-field { display: flex; flex-direction: column; align-items: stretch; gap: var(--space-2xs); font-family: var(--font-body); max-width: 480px; } .sm-field > label { font-size: var(--font-size-body); font-weight: var(--font-weight-medium); color: var(--color-text-primary); } .sm-field > .hint { font-size: var(--font-size-small); color: var(--color-text-subtle); } /* Text wells keep the caret: writing `pointer` on one is the opposite mistake. */ .sm-well { min-height: var(--size-control-md); padding: 0 var(--space-sm); width: 100%; background: var(--color-surface-card); color: var(--color-text-primary); border: var(--border-width-hairline) solid var(--color-border-control); border-radius: var(--radius-control); font-family: var(--font-body); font-size: var(--font-size-body); transition: border-color var(--duration-fast), background var(--duration-fast); } textarea.sm-well { min-height: calc(var(--size-control-md) * 2); padding: var(--space-xs) var(--space-sm); line-height: var(--line-height-body); resize: vertical; } .sm-well::placeholder { color: var(--color-text-subtle); } .sm-well:hover { border-color: var(--color-border-strong); } .sm-well:focus { border-color: var(--color-border-focus); outline: none; } .sm-well[aria-invalid="true"] { border-color: var(--color-feedback-error); box-shadow: inset 0 0 0 1px var(--color-feedback-error); } /* 2px edge without geometry change */ .sm-well:disabled { color: var(--color-text-disabled); border-color: var(--color-border-subtle); background: var(--color-surface-subtle); } /* Validation message: rendered below in flow; it may NEVER move the control it describes; rows align to control tops. */ .sm-msg { display: flex; gap: var(--space-2xs); align-items: baseline; font-family: var(--font-body); font-size: var(--font-size-small); color: var(--color-feedback-error); } /* ---------- select ---------- */ /* A select is CLICKED, not typed into: it carries the button pointer. The popup is OURS, not the OS's: `appearance: base-select` + ::picker(select) restyles the real