/* ============================================================ Patriot Med Logistics - Design Tokens v1.0 (2026-08-27) Anchor: Paul Heikkila's engraved gold-on-black business card. Register: trust-first, veteran-owned medical courier. Dials: VARIANCE 4 / MOTION 3 / DENSITY 4. Rules encoded here are MEASURED, not advisory: - --pm-gold on ivory = 2.05:1 -> decorative only on light. Text-gold on light is --pm-gold-deep (5.18:1 AA). - --pm-crimson on ink = 2.81:1 -> fill only on dark, never text. Ivory on crimson = 5.88:1 AA. Components must reference SEMANTIC aliases (--surface, --text, --accent-text...), never primitives, so both surface scopes stay provably AA. ============================================================ */ :root { /* ---- Color primitives (card-anchored) ---- */ --pm-ink: #14100C; /* primary ground */ --pm-ink-2: #1A150F; /* raised panel on ink */ --pm-navy: #1B2A4A; /* service navy */ --pm-navy-soft: #24365C; /* raised panel on navy */ --pm-gold: #C9A45C; /* brand gold: text on dark, fill anywhere */ --pm-gold-hi: #E8C687; /* gold highlight: links, focus on dark */ --pm-gold-deep: #7D5F27; /* text-gold on light surfaces (5.18:1 AA) */ --pm-crimson: #A6322E; /* STAT / urgency. Fill only on dark. */ --pm-ivory: #F4EFE6; /* light surface + text on dark */ --pm-muted: #AFA593; /* secondary text on dark (7.78:1) */ --pm-muted-dk: #6B6355; /* secondary text on ivory */ /* ---- Rules / hairlines ---- */ --pm-line-on-dark: rgba(244, 239, 230, .10); --pm-line-on-light: rgba(20, 16, 12, .14); --pm-line-on-light-strong: rgba(20, 16, 12, .24); /* selected/focused borders on light, e.g. admin status controls */ /* ---- Wash fills (tinted background, not a solid fill) ---- */ --pm-wash-crimson: #FBEAE9; /* crimson-tinted banner/alert background on light, e.g. admin error states */ /* ---- Elevation (light surface only; dark surface has no raised-panel pattern yet) ---- */ --shadow-1: 0 4px 14px rgba(20, 16, 12, .08); /* hover lift: cards, rows */ --shadow-2: 0 20px 60px rgba(20, 16, 12, .30); /* modal / overlay */ --scrim: rgba(20, 16, 12, .45); /* modal backdrop */ /* ---- Type ---- */ --font-display: "Cormorant Garamond", Georgia, serif; /* unslop-ignore: card-anchored engraved serif */ --font-body: "Inter", system-ui, -apple-system, sans-serif; --font-nav: "BT Steinhart Mono", "JetBrains Mono", monospace; /* the marketing header's real nav-link face - admin-surface chrome only, never body/data text (licensed display face, not a reading font) */ --text-xs: .72rem; /* eyebrow, badge, caption */ --text-sm: .875rem; /* secondary body, form labels */ --text-base: 1rem; /* body. line-height 1.65 */ --text-lg: 1.125rem; /* lead paragraph */ --text-xl: 1.375rem; /* h3 / card titles (display face) */ --text-2xl: clamp(1.9rem, 4.4vw, 3.1rem); /* h2, section heads */ --text-hero: clamp(2.6rem, 6vw, 4.4rem); /* h1 only, once per page */ --leading-body: 1.65; --leading-head: 1.12; --tracking-eyebrow: .28em; /* uppercase 600, gold */ /* ---- Spacing (4px base) ---- */ --space-1: .25rem; --space-2: .5rem; --space-3: .75rem; --space-4: 1rem; --space-6: 1.5rem; --space-8: 2rem; --space-12: 3rem; --space-16: 4rem; --space-24: 6rem; /* ---- Shape: one radius system. Engraved register = near-square. ---- */ --radius-xs: 2px; /* focus rings, inputs */ --radius-sm: 4px; /* buttons, badges, panels */ --radius-pill: 999px; /* tier badges only */ /* ---- Layout ---- */ --wrap-max: 72rem; --wrap-pad: clamp(1.25rem, 4vw, 2.5rem); /* ---- Motion (MOTION 3: state feedback only, no ambient) ---- */ --dur-fast: 150ms; --dur-base: 240ms; --ease-standard: cubic-bezier(.2, .6, .2, 1); /* ---- Focus ---- */ --focus-ring: 2px solid var(--pm-gold-hi); --focus-offset: 3px; /* ---- Service-tier semantics (Paul's actual offerings) ---- STAT = crimson fill, ivory text (urgent, life-critical) Scheduled = gold fill, ink text (routes, recurring) Specialized = navy fill, ivory text (radiopharm, temp-sensitive) */ --tier-stat-bg: var(--pm-crimson); --tier-stat-text: var(--pm-ivory); --tier-scheduled-bg: var(--pm-gold); --tier-scheduled-text: var(--pm-ink); --tier-special-bg: var(--pm-navy); --tier-special-text: var(--pm-ivory); } /* ============================================================ Surface scopes. Components use ONLY these aliases. ============================================================ */ .pm-dark { --surface: var(--pm-ink); --surface-2: var(--pm-ink-2); --text: var(--pm-ivory); --text-muted: var(--pm-muted); --accent-text: var(--pm-gold); /* 8.07:1 */ --accent-link: var(--pm-gold-hi); /* 11.59:1 */ --rule: var(--pm-line-on-dark); background: var(--surface); color: var(--text); } .pm-light { --surface: var(--pm-ivory); --surface-2: #FFFFFF; --text: var(--pm-ink); --text-muted: var(--pm-muted-dk); --accent-text: var(--pm-gold-deep); /* 5.18:1. NEVER --pm-gold as text here. */ --accent-link: var(--pm-gold-deep); --rule: var(--pm-line-on-light); background: var(--surface); color: var(--text); } /* ============================================================ Base element voice (either scope) ============================================================ */ .pm-dark, .pm-light { font-family: var(--font-body); font-size: var(--text-base); line-height: var(--leading-body); -webkit-font-smoothing: antialiased; } .pm-dark h1, .pm-dark h2, .pm-dark h3, .pm-light h1, .pm-light h2, .pm-light h3 { font-family: var(--font-display); font-weight: 700; line-height: var(--leading-head); letter-spacing: .005em; } .pm-eyebrow { font-family: var(--font-body); font-size: var(--text-xs); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; font-weight: 600; color: var(--accent-text); } .pm-dark a, .pm-light a { color: var(--accent-link); } .pm-dark :focus-visible, .pm-light :focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); border-radius: var(--radius-xs); } @media (prefers-reduced-motion: reduce) { .pm-dark *, .pm-light * { transition-duration: 1ms !important; animation-duration: 1ms !important; animation-iteration-count: 1 !important; } }