/* ============================================================ Postmarc Design System — Tokens Source of truth: Figma "Postmarc Tokens" collection (file wNNQ6Sm6OkgKYIqs8xGv0p). Synced 1-on-1 on 2026-06-08. Every value below is a token pulled straight from Figma. Spec uses slashes in names (color/bg). CSS variables cannot contain slashes, so slashes become dashes: --color-bg. JSON keeps the original nested structure. Light is the default. Dark overrides live in :root[data-theme="dark"] at the bottom of section 1. ============================================================ */ :root { /* ---------- 1. Colors (Light) ---------- */ --color-bg: #EFE3C0; /* Page background (oat) */ --color-bg-deep: #EAD9A8; /* Deeper background blocks */ --color-peach: #FFCE99; /* Warm highlight panels (the cover) */ --color-surface: #F7EFD6; /* Cards, inputs, pills */ --color-surface-hi: #FBF4DF; /* Raised surface */ --color-ink: #562F00; /* Primary text and icons (brown) */ --color-ink-on-accent: #FFFFFF; /* Text on the teal CTA */ --color-accent: #0992C2; /* Teal. Primary CTA, focus ring */ --color-accent-italic: #FF9644; /* Orange. Italic accent word in the brand */ --color-muted: #8A6E48; /* Secondary text, captions */ --color-rule: #DFD2A8; /* Borders and dividers */ --color-page-bg: #E7EAEE; /* Canvas behind the artboard */ --color-state-hover-overlay: rgba(0, 0, 0, 0.06); /* Hover wash */ --color-state-pressed-overlay: rgba(0, 0, 0, 0.13); /* Pressed wash */ --color-state-focus-ring: #0992C2; /* Focus ring */ --color-state-disabled-fg: rgba(138, 110, 72, 0.5); /* Disabled text and icons */ /* Status colors (Light). Added 2026-06-08 from Figma. */ --color-success: #3E7C4F; /* Success (warm green) */ --color-warning: #C77E12; /* Warning (amber) */ --color-error: #B23A2E; /* Error (warm red) */ /* ---------- 2. Spacing ---------- */ --spacing-2: 2px; --spacing-4: 4px; --spacing-6: 6px; --spacing-8: 8px; --spacing-10: 10px; --spacing-12: 12px; --spacing-14: 14px; --spacing-16: 16px; --spacing-20: 20px; --spacing-24: 24px; --spacing-28: 28px; --spacing-32: 32px; --spacing-40: 40px; --spacing-48: 48px; --spacing-56: 56px; --spacing-64: 64px; --spacing-72: 72px; /* ---------- 3. Radius ---------- */ --radius-4: 4px; --radius-6: 6px; --radius-8: 8px; --radius-10: 10px; --radius-11: 11px; --radius-12: 12px; --radius-14: 14px; --radius-16: 16px; --radius-full: 999px; /* ---------- 4. Control heights ---------- */ --size-control-sm: 32px; /* Chip, Pill Default */ --size-control-pill-md: 40px; /* Pill Large */ --size-control-default: 48px; /* Button, Input, Search, Pill Extra Large */ --size-control-large: 56px; /* Large Button, Input, Search */ --size-iconbtn-default: 40px; /* Icon Button Default */ --size-iconbtn-large: 48px; /* Icon Button Large */ /* ---------- 5. Typography ---------- */ /* Families. Headings/brand/price/CTA run on the display font, body on Inter. The display font is Host Grotesk, the brand font, now live in both Figma and code. Hanken Grotesk is kept only as a fallback (the old Figma stand-in). */ --font-display: "Host Grotesk", "Hanken Grotesk", system-ui, sans-serif; --font-body: "Inter", system-ui, sans-serif; /* Weight: Medium is the heaviest used on Host Grotesk roles. */ --font-weight-medium: 500; --font-weight-regular: 400; /* Per-role size and line-height. Values are Desktop. Mobile values override in the media query below. Roles on --font-display: display, h1-h4, brand, button. Roles on --font-body: body, body-small, label, caption, eyebrow, badge-lot. */ --text-display-size: 88px; --text-display-line: 96px; --text-display-italic-size: 88px; --text-display-italic-line: 96px; --text-h1-size: 56px; --text-h1-line: 56px; --text-h2-size: 44px; --text-h2-line: 48px; --text-h3-size: 36px; --text-h3-line: 40px; --text-h4-size: 22px; --text-h4-line: 28px; /* also the price */ --text-brand-size: 21px; --text-brand-line: 24px; --text-button-size: 16px; --text-button-line: 20px; --text-body-size: 17px; --text-body-line: 26px; --text-body-small-size: 15px; --text-body-small-line: 22px; --text-label-size: 13px; --text-label-line: 18px; --text-caption-size: 12.5px; --text-caption-line: 18px; --text-eyebrow-size: 13px; --text-eyebrow-line: 18px; --text-badge-lot-size: 10px; --text-badge-lot-line: 14px; /* ---------- 6. Border widths (line thickness) ---------- */ --border-sm: 1px; /* Primary disabled outline */ --border-md: 1.5px; /* Secondary button outline */ --border-lg: 2px; /* Focus ring on any control */ /* ---------- 7. Effects — Primary button shadow ---------- */ /* The Primary button has TWO stacked shadow layers, both fully broken out into x, y, blur, spread and color so each part is its own token. Layer 1 = the teal glow. Layer 2 = the darker contact shadow. Captured 1-on-1 from the Figma Button component. */ /* Layer 1 — teal glow */ --shadow-glow-x: 0px; --shadow-glow-y: 10px; /* Hover raises this to 12px */ --shadow-glow-y-hover: 12px; --shadow-glow-blur: 20px; --shadow-glow-spread: -8px; --shadow-glow-color: rgba(9, 146, 194, 0.42); /* accent teal at 42% */ /* Layer 2 — contact shadow */ --shadow-contact-x: 0px; --shadow-contact-y: 2px; /* Hover raises this to 3px */ --shadow-contact-y-hover: 3px; --shadow-contact-blur: 3px; --shadow-contact-spread: 0px; --shadow-contact-color: rgba(9, 70, 95, 0.28); /* deep teal at 28% */ /* Layer 3 — inner top highlight (the inner line, sits inside the top edge) */ --shadow-inner-x: 0px; --shadow-inner-y: 1px; --shadow-inner-blur: 0px; --shadow-inner-spread: 0px; --shadow-inner-color: transparent; /* was a white inset highlight; removed — read as a shine on the CTA */ /* Composed shadows, built from the parts above. The inset highlight is listed first so it renders on top of the fill. Use these on the button. */ --shadow-primary: inset var(--shadow-inner-x) var(--shadow-inner-y) var(--shadow-inner-blur) var(--shadow-inner-spread) var(--shadow-inner-color), var(--shadow-glow-x) var(--shadow-glow-y) var(--shadow-glow-blur) var(--shadow-glow-spread) var(--shadow-glow-color), var(--shadow-contact-x) var(--shadow-contact-y) var(--shadow-contact-blur) var(--shadow-contact-spread) var(--shadow-contact-color); --shadow-primary-hover: inset var(--shadow-inner-x) var(--shadow-inner-y) var(--shadow-inner-blur) var(--shadow-inner-spread) var(--shadow-inner-color), var(--shadow-glow-x) var(--shadow-glow-y-hover) var(--shadow-glow-blur) var(--shadow-glow-spread) var(--shadow-glow-color), var(--shadow-contact-x) var(--shadow-contact-y-hover) var(--shadow-contact-blur) var(--shadow-contact-spread) var(--shadow-contact-color); } /* ---------- 5b. Typography — Mobile overrides ---------- */ @media (max-width: 640px) { :root { --text-display-size: 40px; --text-display-line: 44px; --text-display-italic-size: 40px; --text-display-italic-line: 44px; --text-h1-size: 30px; --text-h1-line: 32px; --text-h2-size: 28px; --text-h2-line: 32px; --text-h3-size: 22px; --text-h3-line: 26px; --text-h4-size: 19px; --text-h4-line: 24px; --text-brand-size: 18px; --text-brand-line: 22px; --text-button-size: 15px; --text-button-line: 18px; --text-body-size: 15px; --text-body-line: 22px; --text-body-small-size: 14px; --text-body-small-line: 20px; --text-label-size: 12px; --text-label-line: 16px; --text-caption-size: 11px; --text-caption-line: 15px; --text-eyebrow-size: 11px; --text-eyebrow-line: 14px; --text-badge-lot-size: 10px; --text-badge-lot-line: 14px; } } /* ---------- 1b. Colors (Dark) ---------- */ :root[data-theme="dark"] { --color-bg: #1B1814; --color-bg-deep: #241E15; --color-peach: #E0A766; --color-surface: #26211A; --color-surface-hi: #2F2920; --color-ink: #F2E6CA; --color-ink-on-accent: #FFFFFF; --color-accent: #3FB7E0; --color-accent-italic: #FFB270; --color-muted: #B89E72; --color-rule: #3A3225; --color-page-bg: #0F0F12; --color-state-hover-overlay: rgba(255, 255, 255, 0.07); --color-state-pressed-overlay: rgba(255, 255, 255, 0.12); --color-state-focus-ring: #3FB7E0; --color-state-disabled-fg: rgba(184, 158, 114, 0.5); /* Status colors (Dark) */ --color-success: #7CB892; --color-warning: #E6A93C; --color-error: #E06B5C; }