/* ===================================================================== Haggai International — TOKENS · VENDORED SNAPSHOT --------------------------------------------------------------------- Canonical source is the Claude Design design-system project: _ds/haggai-international-design-system-…/css/tokens.css Refresh it from there rather than editing values here — the handoff is explicit that tokens should stay current with the design system. Custom properties and @font-face only. Nothing selects an element, so this is safe to load into any host: it cannot change how a single existing node renders, it only makes values available. To rebrand form controls, override --hif-* downstream. Never edit forms.tokens.css. ===================================================================== */ /* ----- Font faces ---------------------------------------------------- */ @font-face { font-family: "Montserrat"; src: url("../fonts/Montserrat-VariableFont_wght.ttf") format("truetype-variations"); font-weight: 100 900; font-style: normal; font-display: swap; } @font-face { font-family: "Montserrat"; src: url("../fonts/Montserrat-Italic-VariableFont_wght.ttf") format("truetype-variations"); font-weight: 100 900; font-style: italic; font-display: swap; } @font-face { font-family: "Roboto"; src: url("../fonts/Roboto-VariableFont_wdth_wght.ttf") format("truetype-variations"); font-weight: 100 900; font-stretch: 75% 100%; font-style: normal; font-display: swap; } @font-face { font-family: "Roboto"; src: url("../fonts/Roboto-Italic-VariableFont_wdth_wght.ttf") format("truetype-variations"); font-weight: 100 900; font-stretch: 75% 100%; font-style: italic; font-display: swap; } @font-face { font-family: "Roboto Condensed"; src: url("../fonts/Roboto_Condensed-Regular.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Roboto Condensed"; src: url("../fonts/Roboto_Condensed-Bold.ttf") format("truetype"); font-weight: 700; font-style: normal; font-display: swap; } /* ----- Tokens -------------------------------------------------------- */ :root { /* Brand palette (HI Logo Quick Reference Guide) */ --hi-dark-blue: #203B63; --hi-medium-blue: #3B82BD; --hi-light-blue: #D9F1FD; --hi-gold: #FFC95C; --hi-taupe: #6F6052; --hi-black: #000000; --hi-white: #FFFFFF; /* Extended neutrals — Salesforce-scoped (2026.06 review) */ --hi-paper: #FAFAF7; --hi-cream: #F5EFE6; --hi-stone-100: #EFECE7; --hi-stone-200: #D9D3CA; --hi-stone-300: #B8AFA3; --hi-stone-500: #8A7E70; --hi-stone-700: #574A3E; /* Semantic status colors — the ratified, accessibility-critical set. Reference these; do not hand-write near-miss hexes. */ --status-success: #2E7D55; --status-success-bg: #E6F1EB; --status-success-border: #BFD9CC; --status-warning: #B57A1C; --status-warning-strong: #8A6410; /* small-text variant — AA on tint & white */ --status-warning-bg: #FBF0DA; --status-warning-border: #ECD9AE; --status-error: #B5403C; --status-error-bg: #F8E9E8; --status-error-border: #E8C5C3; --status-info: #2F6CA3; --status-info-bg: #E3F1FB; --status-info-border: #AFD2EC; /* Tints / shades (derived) */ --hi-dark-blue-90: #354D75; --hi-dark-blue-80: #4A5F88; --hi-medium-blue-90: #5295CB; --hi-medium-blue-tint:#8FB6D9; --hi-light-blue-50: #ECF7FE; /* Semantic foreground / background. body text = black · headings = dark blue · subtext = taupe */ --bg: var(--hi-paper); --bg-elevated: var(--hi-white); --bg-subtle: var(--hi-stone-100); --bg-brand: var(--hi-dark-blue); --bg-brand-soft: var(--hi-light-blue); --bg-accent: var(--hi-gold); --fg: var(--hi-black); --fg-body: var(--hi-black); --fg-heading: var(--hi-dark-blue); --fg-muted: var(--hi-taupe); --fg-subtle: var(--hi-stone-500); --fg-on-brand: var(--hi-white); --fg-on-gold: var(--hi-taupe); --fg-on-light-blue: var(--hi-dark-blue); --accent: var(--hi-gold); --border: var(--hi-stone-200); --border-strong: var(--hi-stone-300); --border-brand: var(--hi-dark-blue); --link: var(--hi-medium-blue); --link-hover: var(--hi-dark-blue); /* Type families */ --font-display: "Montserrat", "Helvetica Neue", Arial, sans-serif; --font-body: "Roboto", "Helvetica Neue", Arial, sans-serif; --font-condensed:"Roboto Condensed", "Roboto", Arial, sans-serif; --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace; /* Type scale (rems @ 16px root) */ --fs-xs: 0.75rem; --fs-sm: 0.875rem; --fs-base: 1rem; --fs-md: 1.125rem; --fs-lg: 1.25rem; --fs-xl: 1.5rem; --fs-2xl: 2rem; --fs-3xl: 2.5rem; --fs-4xl: 3.25rem; --fs-5xl: 4.5rem; /* Fluid type — web/print only; Salesforce and email keep the fixed scale */ --fs-fluid-display: clamp(2.5rem, 6vw, 5rem); --fs-fluid-h1: clamp(2rem, 4vw, 3.25rem); --fs-fluid-h2: clamp(1.5rem, 3vw, 2.25rem); --fs-fluid-h3: clamp(1.2rem, 2vw, 1.6rem); --fs-fluid-h4: clamp(1rem, 1.5vw, 1.25rem); --lh-tight: 1.1; --lh-snug: 1.25; --lh-base: 1.5; --lh-loose: 1.7; --tracking-tight: 0; /* retired (v2026.06) — headlines are never tracked */ --tracking-normal: 0; --tracking-wide: 0.04em; --tracking-caps-lg: 0.14em; /* ALL-CAPS only — nav, eyebrows, section labels */ --tracking-caps-btn:0.12em; /* ALL-CAPS only — CTA buttons */ --tracking-wider: var(--tracking-caps-btn); /* Spacing scale (4px base) */ --sp-0: 0; --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 96px; --sp-10:128px; /* Radii — Haggai's print language is squared; keep only slight softening */ --r-none: 0; --r-sm: 2px; --r-md: 4px; --r-lg: 4px; --r-xl: 8px; --r-pill: 999px; /* Shadows — brand-tinted */ --shadow-1: 0 1px 2px rgba(32, 59, 99, 0.06), 0 1px 1px rgba(32, 59, 99, 0.04); --shadow-2: 0 4px 12px rgba(32, 59, 99, 0.08), 0 1px 2px rgba(32, 59, 99, 0.05); --shadow-3: 0 12px 32px rgba(32, 59, 99, 0.12), 0 2px 6px rgba(32, 59, 99, 0.06); /* Motion */ --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --dur-fast: 120ms; --dur-base: 200ms; --dur-slow: 320ms; }