/* ════════════════════════════════════════════════════════════════════════ src/shared/brand.css — Donna OS canonical design system (single source) Generated from the Donna HR Design System ("design rules/" — tokens/, components/core/, guidelines/). This is the ONE stylesheet every surface (the shell + every module) links so the whole OS shares one look. Contents: 1. Webfonts Hanken Grotesk + JetBrains Mono 2. Tokens color (warm-white + dark modes), type, spacing, radius, warm shadows, motion 3. Base reset, focus ring, .code-note, .overline helpers 4. Components .btn .badge .card .metric .field .eyebrow (plain-CSS ports of the React primitives so the no-build static modules can use them directly) Usage: (shell, absolute-safe) Dark mode: add data-theme="dark" on or any wrapper. Source of truth lives in the design-rules skill. Re-sync token values from design rules/tokens/*.css when the brand changes; do not fork them here. ════════════════════════════════════════════════════════════════════════ */ @import url('https://fonts.googleapis.com/css2?family=Hanken+Grotesk:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400&family=JetBrains+Mono:wght@400;500;700&display=swap'); /* ── 1. TOKENS · COLOR ──────────────────────────────────────────────────── */ :root { /* Brand red scale */ --red-50:#FEF1ED; --red-100:#FDDDD3; --red-200:#FBC1B0; --red-300:#F89A7F; --red-400:#F46A48; --red-500:#F0421F; --red-600:#D8351A; --red-700:#B32A14; --red-800:#8C2110; --red-900:#5E170C; /* Warm neutral (stone) scale — never cold gray */ --stone-0:#FFFFFF; --stone-50:#FAF6F0; --stone-100:#F3ECE2; --stone-150:#ECE2D5; --stone-200:#E4D8C8; --stone-300:#D2C3AF; --stone-400:#AC9C86; --stone-500:#837561; --stone-600:#5E5447; --stone-700:#423A31; --stone-800:#2A241E; --stone-850:#201B16; --stone-900:#161210; --stone-950:#0D0B09; /* Support accents (analytics only, low-saturation, warm-leaning) */ --green-500:#2F9E5E; --green-bg:#E6F2EA; --amber-500:#D98A1F; --amber-bg:#F8EEDB; /* Semantic aliases — Warm White mode (default) */ --brand:var(--red-500); --brand-hover:var(--red-600); --brand-press:var(--red-700); --brand-contrast:#FFFFFF; --brand-tint:var(--red-50); --bg:var(--stone-50); --surface:var(--stone-0); --surface-2:var(--stone-100); --surface-sunken:var(--stone-150); --text:#1A1611; --text-soft:var(--stone-600); --text-muted:var(--stone-500); --text-on-brand:#FFFFFF; --text-invert:var(--stone-50); --border:var(--stone-200); --border-strong:var(--stone-300); --border-faint:var(--stone-100); --code:var(--stone-500); --focus-ring:color-mix(in oklab, var(--red-500) 45%, transparent); --positive:var(--green-500); --positive-bg:var(--green-bg); --warning:var(--amber-500); --warning-bg:var(--amber-bg); /* ── 2. TOKENS · TYPE ── */ --font-sans:'Hanken Grotesk', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif; --font-mono:'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace; --font-display:var(--font-sans); --text-xs:12px; --text-sm:14px; --text-base:16px; --text-md:18px; --text-lg:21px; --text-xl:26px; --text-2xl:33px; --text-3xl:42px; --text-4xl:54px; --text-5xl:68px; --text-6xl:86px; --weight-regular:400; --weight-medium:500; --weight-semibold:600; --weight-bold:700; --weight-heavy:800; --leading-tight:1.04; --leading-snug:1.14; --leading-normal:1.5; --leading-relaxed:1.65; --tracking-tight:-0.022em; --tracking-snug:-0.01em; --tracking-normal:0; --tracking-wide:0.04em; --tracking-mono:0.02em; --tracking-caps:0.12em; /* ── 3. TOKENS · SPACING / RADIUS / SHADOW / LAYOUT / MOTION ── */ --space-0:0; --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:20px; --space-6:24px; --space-8:32px; --space-10:40px; --space-12:48px; --space-16:64px; --space-20:80px; --space-24:96px; --space-32:128px; --radius-xs:4px; --radius-sm:7px; --radius-md:11px; --radius-lg:16px; --radius-xl:22px; --radius-2xl:30px; --radius-pill:999px; --shadow-xs:0 1px 2px rgba(38,26,16,0.06); --shadow-sm:0 1px 3px rgba(38,26,16,0.08), 0 1px 2px rgba(38,26,16,0.05); --shadow-md:0 4px 14px rgba(38,26,16,0.08), 0 2px 5px rgba(38,26,16,0.05); --shadow-lg:0 14px 40px rgba(38,26,16,0.12), 0 4px 12px rgba(38,26,16,0.06); --shadow-xl:0 28px 70px rgba(38,26,16,0.16), 0 8px 22px rgba(38,26,16,0.08); --shadow-brand:0 8px 24px rgba(240,66,31,0.28); --container:1200px; --container-sm:720px; --gutter:24px; --section-y:96px; --ease-out:cubic-bezier(0.22,0.61,0.36,1); --ease-in-out:cubic-bezier(0.65,0,0.35,1); --ease-spring:cubic-bezier(0.34,1.56,0.64,1); --dur-fast:120ms; --dur-base:200ms; --dur-slow:360ms; } /* Dark + Red mode */ [data-theme="dark"] { --brand:var(--red-500); --brand-hover:var(--red-400); --brand-press:var(--red-600); --brand-contrast:#FFFFFF; --brand-tint:color-mix(in oklab, var(--red-500) 16%, var(--stone-900)); --bg:var(--stone-900); --surface:var(--stone-850); --surface-2:var(--stone-800); --surface-sunken:var(--stone-950); --text:#F5EFE6; --text-soft:var(--stone-300); --text-muted:var(--stone-400); --text-on-brand:#FFFFFF; --text-invert:var(--stone-900); --border:color-mix(in oklab, var(--stone-300) 16%, transparent); --border-strong:color-mix(in oklab, var(--stone-300) 28%, transparent); --border-faint:color-mix(in oklab, var(--stone-300) 9%, transparent); --code:var(--stone-400); --focus-ring:color-mix(in oklab, var(--red-400) 55%, transparent); --positive:#4FB97A; --positive-bg:color-mix(in oklab, var(--green-500) 18%, var(--stone-900)); --warning:#E3A23F; --warning-bg:color-mix(in oklab, var(--amber-500) 18%, var(--stone-900)); } /* ── 4. BASE / RESET ────────────────────────────────────────────────────── */ .bb, .bb *, .bb *::before, .bb *::after { box-sizing:border-box; } /* Scope-friendly base: apply to on shell/modules. Kept as a class (not bare body) so it can't fight a module's own reset. */ .bb { font-family:var(--font-sans); font-size:var(--text-base); line-height:var(--leading-normal); color:var(--text); background:var(--bg); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; font-feature-settings:'cv01','ss01'; } .bb h1, .bb h2, .bb h3, .bb h4 { font-family:var(--font-display); font-weight:var(--weight-heavy); line-height:var(--leading-snug); letter-spacing:var(--tracking-tight); color:var(--text); text-wrap:balance; } .bb p { text-wrap:pretty; } .bb a { color:inherit; text-decoration:none; } .bb code, .bb kbd, .bb samp, .bb pre { font-family:var(--font-mono); font-size:0.92em; } .bb ::selection { background:var(--brand); color:var(--brand-contrast); } .bb :focus-visible { outline:3px solid var(--focus-ring); outline-offset:2px; } /* Signature helpers */ .code-note { font-family:var(--font-mono); font-size:var(--text-sm); letter-spacing:var(--tracking-mono); color:var(--code); } .overline { font-family:var(--font-mono); font-size:var(--text-xs); font-weight:var(--weight-medium); letter-spacing:var(--tracking-caps); text-transform:uppercase; color:var(--brand); } /* ── 5. COMPONENT · BUTTON ──────────────────────────────────────────────── */ .btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:11px 20px; /* md */ font-family:var(--font-sans); font-size:var(--text-base); font-weight:var(--weight-semibold); letter-spacing:var(--tracking-snug); line-height:1; border-radius:var(--radius-md); border:1px solid transparent; cursor:pointer; white-space:nowrap; transition:transform var(--dur-fast) var(--ease-out), background var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); } .btn--sm { padding:8px 14px; font-size:var(--text-sm); border-radius:var(--radius-sm); gap:6px; } .btn--lg { padding:15px 28px; font-size:var(--text-md); border-radius:var(--radius-md); gap:10px; } .btn--primary { background:var(--brand); color:var(--brand-contrast); box-shadow:var(--shadow-brand); } .btn--primary:hover { background:var(--brand-hover); } .btn--primary:active { background:var(--brand-press); transform:translateY(1px); } .btn--secondary { background:var(--surface); color:var(--text); border-color:var(--border-strong); box-shadow:var(--shadow-xs); } .btn--secondary:hover { background:var(--surface-2); } .btn--ghost { background:transparent; color:var(--text); } .btn--ghost:hover { background:var(--surface-2); } .btn:disabled, .btn[aria-disabled="true"] { opacity:0.5; cursor:not-allowed; box-shadow:none; } /* ── 6. COMPONENT · BADGE ───────────────────────────────────────────────── */ .badge { display:inline-flex; align-items:center; gap:6px; padding:4px 10px; font-family:var(--font-mono); font-size:var(--text-xs); font-weight:var(--weight-medium); letter-spacing:var(--tracking-mono); line-height:1.2; border-radius:var(--radius-pill); white-space:nowrap; border:1px solid transparent; } .badge--sans { font-family:var(--font-sans); letter-spacing:var(--tracking-wide); } .badge--brand { background:var(--brand-tint); color:var(--brand); border-color:color-mix(in oklab, var(--brand) 22%, transparent); } .badge--neutral { background:var(--surface-2); color:var(--text-soft); border-color:var(--border); } .badge--positive { background:var(--positive-bg); color:var(--positive); border-color:color-mix(in oklab, var(--positive) 26%, transparent); } .badge--warning { background:var(--warning-bg); color:var(--warning); border-color:color-mix(in oklab, var(--warning) 26%, transparent); } .badge--solid { background:var(--text); color:var(--bg); } /* ── 7. COMPONENT · CARD ────────────────────────────────────────────────── */ .card { border-radius:var(--radius-lg); padding:var(--space-6); background:var(--surface); color:var(--text); border:1px solid var(--border); box-shadow:var(--shadow-sm); } .card--sunken { background:var(--surface-sunken); border-color:var(--border-faint); box-shadow:none; } .card--brand { background:var(--brand); color:var(--brand-contrast); border-color:transparent; box-shadow:none; } .card--dark { background:var(--stone-900); color:#F5EFE6; border-color:color-mix(in oklab, #fff 10%, transparent); box-shadow:none; } /* ── 8. COMPONENT · METRIC CARD ─────────────────────────────────────────── */ .metric { display:flex; flex-direction:column; gap:var(--space-3); padding:var(--space-5); border-radius:var(--radius-lg); background:var(--surface); color:var(--text); border:1px solid var(--border); box-shadow:var(--shadow-sm); } .metric--dark { background:var(--stone-900); color:#F5EFE6; border-color:color-mix(in oklab, #fff 10%, transparent); box-shadow:none; } .metric__label { font-family:var(--font-mono); font-size:var(--text-xs); letter-spacing:var(--tracking-caps); text-transform:uppercase; color:var(--text-muted); } .metric--dark .metric__label { color:var(--stone-400); } .metric__row { display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; } .metric__value { font-family:var(--font-display); font-weight:var(--weight-heavy); font-size:var(--text-3xl); letter-spacing:var(--tracking-tight); line-height:1; } .metric__unit { font-size:var(--text-lg); color:var(--text-muted); font-weight:var(--weight-bold); } .metric--dark .metric__unit { color:var(--stone-400); } .metric__delta { font-family:var(--font-mono); font-size:var(--text-sm); font-weight:var(--weight-medium); color:var(--positive); } .metric__delta--warning { color:var(--warning); } .metric__delta--negative { color:var(--brand); } /* ── 9. COMPONENT · INPUT / FIELD ───────────────────────────────────────── */ .field { display:flex; flex-direction:column; gap:7px; } .field__label { font-family:var(--font-sans); font-size:var(--text-sm); font-weight:var(--weight-medium); color:var(--text-soft); } .field__wrap { display:inline-flex; align-items:center; gap:8px; background:var(--surface); border:1px solid var(--border-strong); border-radius:var(--radius-md); padding:0 14px; transition:border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); } .field__wrap:focus-within { border-color:var(--brand); box-shadow:0 0 0 3px var(--focus-ring); } .field__prefix { color:var(--text-muted); font-family:var(--font-mono); font-size:var(--text-sm); } .field__input { flex:1; border:none; outline:none; background:transparent; color:var(--text); font-family:var(--font-sans); font-size:var(--text-base); padding:11px 0; } .field__input::placeholder { color:var(--text-muted); } .field__hint { font-family:var(--font-mono); font-size:var(--text-xs); color:var(--text-muted); letter-spacing:var(--tracking-mono); } /* ── 10. COMPONENT · EYEBROW ────────────────────────────────────────────── */ .eyebrow { font-family:var(--font-mono); font-size:var(--text-sm); font-weight:var(--weight-medium); letter-spacing:var(--tracking-mono); color:var(--code); display:inline-flex; align-items:center; gap:6px; } .eyebrow--label { text-transform:uppercase; letter-spacing:var(--tracking-caps); font-size:var(--text-xs); color:var(--brand); } .eyebrow--comment::before { content:"//"; color:var(--brand); font-weight:var(--weight-bold); margin-right:6px; } /* eyebrow--path uses the base style (muted breadcrumb with · separators) */