/* ============================================================================ Hewmark shared design system — borrowed from ShipReady's token architecture. ONE token set; three swappable skins on . Paper surfaces (marketing, dashboard, capture, certificates) read the plain tokens; the dark field tool reads the --f-* set. Customer choice: set data-theme and persist it (see hewmark-theme.js). Served at /hewmark-theme.css. Default skin = "Shipping Tag", matching the marketing brand 1:1. ============================================================================ */ :root { --serif: 'Fraunces', Georgia, 'Times New Roman', serif; --sans: 'Libre Franklin', system-ui, -apple-system, 'Segoe UI', sans-serif; --mono: 'IBM Plex Mono', ui-monospace, Menlo, Consolas, monospace; --radius: 6px; --radius-sm: 4px; /* ---- Shipping Tag (default) — the marketing palette, exactly ---- */ --paper: #ece1cd; /* page ground (kraft) */ --paper-deep: #e2d4ba; /* recessed bars / bg accents */ --card: #f4ecdc; /* raised surfaces */ --ink: #221a12; /* primary text */ --ink-soft: #4d4136; /* secondary text */ --ink-faint: #7c6f5c; /* labels, captions */ --rule: #a8977c; /* borders */ --rule-soft: #cbbda0; --accent: #8a2b1a; /* brand rust-red (stamp) */ --accent-deep: #6e2113; --accent-soft: #e7d3c2; --verify: #3f6b42; /* forest green — the "verified" stamp */ --warn: #8a5a12; --bad: #9b3324; /* generic aliases the app pages already reference by name */ --bg: var(--paper); --surface: var(--card); --fg: var(--ink); --muted: var(--ink-faint); --border: var(--rule); --ok: var(--verify); /* ---- Field skin (dark tool) — same family, timber-dark ground ---- */ --f-bg: #1a140d; --f-surface: #241c12; --f-surface2: #2e2417; --f-border: #3a2f1f; --f-border-strong: #4f4130; --f-ink: #efe6d4; --f-ink-soft: #b6a988; --f-ink-faint: #82755e; --f-accent: #c6552e; /* brightened rust for dark ground */ --f-hud: #e0912f; /* live-scan amber (state color only) */ --f-verify: #7fa86a; --f-radius: 4px; } /* ---- Registry of Deeds ---- */ :root[data-theme="registry"] { --paper: #e7e3d6; --paper-deep: #dcd6c5; --card: #fbf9f2; --ink: #1c1b18; --ink-soft: #4a463f; --ink-faint: #847f72; --rule: #cfc9b7; --rule-soft: #e0dccb; --accent: #7c2e2a; --accent-deep: #5f211e; --accent-soft: #e8ddd0; --verify: #4e6b39; --warn: #8a5a12; --bad: #7c2e2a; --f-bg: #17140f; --f-surface: #211d16; --f-surface2: #2a2417; --f-border: #39301f; --f-border-strong: #4e432e; --f-ink: #ece6d4; --f-ink-soft: #b3a88f; --f-ink-faint: #7c7160; --f-accent: #b84a40; --f-hud: #b99442; --f-verify: #83ba6a; } /* ---- Blueprint ---- */ :root[data-theme="blueprint"] { --paper: #e9e5d8; --paper-deep: #dcd7c7; --card: #fbfaf4; --ink: #16202b; --ink-soft: #3f4b57; --ink-faint: #6e7a85; --rule: #c6c3b3; --rule-soft: #dcd9c9; --accent: #244763; --accent-deep: #183145; --accent-soft: #dbe4ec; --verify: #2f6b52; --warn: #8a5a12; --bad: #b4502a; --f-bg: #0e1721; --f-surface: #15212d; --f-surface2: #1b2c3a; --f-border: #243748; --f-border-strong: #33506a; --f-ink: #e4ebf1; --f-ink-soft: #9db0c0; --f-ink-faint: #647787; --f-accent: #4e86b4; --f-hud: #b4502a; --f-verify: #6fae8f; } /* Shared helper: brand wordmark + display headings use the serif face. */ .hew-serif { font-family: var(--serif); } /* Display headings across every surface that loads this file use the brand serif (pages may still override per-element where they set font-family). */ h1, h2, h3 { font-family: var(--serif); font-weight: 600; }