/* HCMOS™ design tokens (product layer + client skins). 23 Oct 2026. * * Three layers, as DESIGN.md describes: * 1. Primitives raw values (fonts, the spacing grid, radii, motion curves, the neutral ramp) * 2. Semantic what a value is FOR (--hc-text-*, --hc-surface-*, --hc-line-*, --hc-status-*) * 3. Component per component, in the component's own stylesheet, built only from layer 2 * Components never use a raw hex or px value that is not a token. A client skin overrides ONLY the * --hc-brand-* and --hc-stripe values; everything else is the product and is the same for every client. */ @font-face { font-family: "HC Barlow"; src: url("/assets/taifa_theme/fonts/barlow-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "HC Barlow"; src: url("/assets/taifa_theme/fonts/barlow-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: "HC Barlow"; src: url("/assets/taifa_theme/fonts/barlow-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: "HC Barlow"; src: url("/assets/taifa_theme/fonts/barlow-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: "HC Barlow Condensed"; src: url("/assets/taifa_theme/fonts/barlow-condensed-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: "HC Barlow Condensed"; src: url("/assets/taifa_theme/fonts/barlow-condensed-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: "HC Barlow Condensed"; src: url("/assets/taifa_theme/fonts/barlow-condensed-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; } :root, :host { /* ---------- 1. primitives ---------- */ --hc-font-ui: "HC Barlow", "Barlow", system-ui, -apple-system, "Segoe UI", sans-serif; --hc-font-display: "HC Barlow Condensed", "Barlow Condensed", "HC Barlow", "Arial Narrow", sans-serif; /* type scale: 14px base, ratio 1.25 */ --hc-size-micro: 11px; --hc-size-caption: 12px; --hc-size-body: 14px; --hc-size-lead: 16px; --hc-size-h3: 20px; --hc-size-h2: 25px; --hc-size-h1: 31px; --hc-size-display: 39px; --hc-size-hero: 49px; /* spacing grid: 4px */ --hc-space-1: 4px; --hc-space-2: 8px; --hc-space-3: 12px; --hc-space-4: 16px; --hc-space-5: 20px; --hc-space-6: 24px; --hc-space-8: 32px; --hc-space-10: 40px; --hc-space-14: 56px; --hc-space-18: 72px; --hc-radius-control: 6px; --hc-radius-panel: 10px; --hc-radius-sheet: 14px; --hc-radius-pill: 999px; /* neutral ramp: one hue (basalt slate, h=212), lightness only */ --hc-basalt-950: #0B1C2E; --hc-basalt-800: #233548; --hc-basalt-700: #3A4B5E; --hc-basalt-600: #536375; --hc-basalt-500: #637284; --hc-basalt-300: #B7C1CB; --hc-basalt-200: #D7DEE5; --hc-basalt-100: #EAEEF2; --hc-basalt-50: #F4F6F8; --hc-white: #FFFFFF; --hc-ease-out: cubic-bezier(0.23, 1, 0.32, 1); --hc-ease-move: cubic-bezier(0.77, 0, 0.175, 1); --hc-dur-press: 120ms; --hc-dur-quick: 180ms; --hc-dur-panel: 240ms; /* springs (26 Oct 2026): damped harmonic motion as easing curves, for things a person moves (sheets, drawers, toggles, switches). Transitions retarget from where they are, so a spring can be caught mid-way. snappy: damping ratio 0.86, settles in 320 ms, no visible overshoot; soft: 0.72, 480 ms, about 4 percent past. */ --hc-spring-snappy: linear(0, 0.0274, 0.0948, 0.1847, 0.2847, 0.3861, 0.4833, 0.5727, 0.6525, 0.7221, 0.7814, 0.8311, 0.8719, 0.9049, 0.9312, 0.9518, 0.9676, 0.9795, 0.9883, 0.9946, 0.999, 1.0018, 1.0036, 1.0046, 1.005, 1.005, 1.0047, 1.0043, 1); --hc-spring-soft: linear(0, 0.0292, 0.1027, 0.2027, 0.3157, 0.4312, 0.5423, 0.6442, 0.7341, 0.8107, 0.8741, 0.9248, 0.9639, 0.9929, 1.0133, 1.0267, 1.0344, 1.0379, 1.0382, 1.0363, 1.033, 1.0289, 1.0245, 1.0201, 1.016, 1.0122, 1.009, 1.0062, 1); --hc-dur-spring-snappy: 320ms; --hc-dur-spring-soft: 480ms; /* ---------- 2. semantic ---------- */ --hc-surface-canvas: var(--hc-basalt-50); --hc-surface-panel: var(--hc-white); --hc-surface-sunken: var(--hc-basalt-100); --hc-surface-raised: var(--hc-white); --hc-text-1: var(--hc-basalt-950); /* primary: 17.2:1 on white */ --hc-text-2: var(--hc-basalt-700); /* secondary: 8.9:1 */ --hc-text-3: var(--hc-basalt-600); /* metadata: 6.2:1 */ --hc-text-4: var(--hc-basalt-500); /* muted: 4.9:1 on white, 4.5:1 on canvas */ --hc-line-soft: rgba(11, 28, 46, 0.07); --hc-line: rgba(11, 28, 46, 0.11); --hc-line-strong: rgba(11, 28, 46, 0.2); --hc-shadow-1: 0 0 0 1px rgba(11, 28, 46, 0.06), 0 1px 2px -1px rgba(11, 28, 46, 0.08), 0 2px 4px rgba(11, 28, 46, 0.03); --hc-shadow-2: 0 0 0 1px rgba(11, 28, 46, 0.06), 0 2px 4px -1px rgba(11, 28, 46, 0.06), 0 8px 20px -6px rgba(11, 28, 46, 0.12); --hc-status-critical: #B42318; --hc-status-critical-bg: #FEF3F2; --hc-status-warning: #A15C07; --hc-status-warning-bg: #FEF6E7; --hc-status-ok: #067647; --hc-status-ok-bg: #ECFDF3; /* data series, in order of use; every one carries white 12px labels at 4.5:1 or better */ --hc-series-1: #00838C; /* client accent family */ --hc-series-2: #233548; /* basalt */ --hc-series-3: #946D16; /* gold */ --hc-series-4: #B4532A; /* laterite */ --hc-series-5: #477789; /* diamond ice */ --hc-series-6: #66727F; /* slate */ /* ---------- client skin defaults (RailGrid) ---------- */ --hc-brand-ink: #002858; --hc-brand-accent: #00C0E0; --hc-brand-action: #006E86; /* accent darkened to 5:1 for text and buttons */ --hc-brand-tint: #E6F8FC; --hc-brand-ink-hover: #0A3A78; --hc-brand-action-hover: #005A6E; --hc-brand-mark-tint: #E6F8FC; --hc-stripe: linear-gradient(90deg, var(--hc-brand-ink) 0 50%, var(--hc-brand-accent) 50% 100%); --hc-focus-ring: 0 0 0 2px var(--hc-white), 0 0 0 4px var(--hc-brand-action); } /* ---------- client skin: Taifa Mining and Civils (from the logo, 25 Oct 2026) ---------- * Selection (26 Oct 2026): this block stays the fallback so a Taifa site renders exactly as before. Every * other client gets the RailGrid palette from /hc-skin.css, served per site (site config hcmos_brand_skin; * default "taifa" for the Taifa brand, "railgrid" otherwise) and loaded right after this file on the desk, * web pages, ESS and inside dashboard shadow roots. * The product speaks Taifa's colours in its own register: the website is paper, ink and a lot of yellow; * the product is basalt structure with the logo's charcoal for the frame and main actions, Taifa yellow only * as the "you are here" marker (never text on white), and Taifa blue for links, focus and data series 1. * ink #1E1C1A white on it 17:1 action #005FA8 6.6:1 on white series-1 #3F619E white labels 6.2:1 * mark #F7D100 ink on it 11.4:1 tint #E8F1FA (pairs with action) mark-tint #FFF6C7 (selection) */ :root, :host, [data-hc-client="taifa"] { --hc-brand-ink: #1E1C1A; --hc-brand-ink-hover: #34312D; --hc-brand-accent: #F7D100; --hc-brand-action: #005FA8; --hc-brand-action-hover: #004E8A; --hc-brand-tint: #E8F1FA; --hc-brand-mark-tint: #FFF6C7; --hc-series-1: #3F619E; /* the Tanzanian flag as a hairline: green, gold edge, black band, gold edge, blue; once per screen */ --hc-stripe: linear-gradient(90deg, #1EB53A 0 30%, #FCD116 30% 33%, #0B1C2E 33% 67%, #FCD116 67% 70%, #00A3DD 70% 100%); } /* ---------- doorway: sign-in and public pages only (DESIGN.md, "Doorway pages", 24 Oct 2026) ---------- * The pages people pass through before or outside the product (HCMOS sign-in, Taifa ESS sign-in, document * verification, not-found and error pages) carry the client's PUBLIC identity, the same one as the client's * home page: its paper, ink, accent, display face and a photograph of its work. Working screens never use * these tokens; they stay on the product layer above. A client skin sets the --hc-door-* values below; * the product defaults are RailGrid's. */ @font-face { font-family: "HC Door Display"; src: url("/assets/taifa_theme/fonts/bebas-neue-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; } @font-face { font-family: "HC Door Text"; src: url("/assets/taifa_theme/fonts/lato-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; } @font-face { font-family: "HC Door Text"; src: url("/assets/taifa_theme/fonts/lato-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-display: swap; } @font-face { font-family: "HC Door Mono"; src: url("/assets/taifa_theme/fonts/jetbrains-mono-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; } @font-face { font-family: "HC Door Mono"; src: url("/assets/taifa_theme/fonts/jetbrains-mono-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-display: swap; } :root, :host { --hc-door-paper: #F4F6F8; --hc-door-card: #FFFFFF; --hc-door-ink: #002858; --hc-door-muted: #536375; /* 5.9:1 on paper */ --hc-door-line: rgba(0, 40, 88, 0.16); --hc-door-accent: #00C0E0; /* button fill; text on it is --hc-door-on-accent */ --hc-door-accent-hover: #33CDE6; --hc-door-on-accent: #002858; --hc-door-link: #006E86; /* text links, 5:1 or better on paper and card */ --hc-door-focus: #006E86; --hc-door-shade: rgba(0, 40, 88, 0.86); --hc-door-photo-work: none; /* the business at work: sign-in brand panel */ --hc-door-photo-people: none; /* its people: ESS sign-in header */ --hc-font-door-display: "HC Barlow Condensed", "Arial Narrow", sans-serif; --hc-font-door-text: var(--hc-font-ui); --hc-font-door-mono: ui-monospace, Menlo, monospace; --hc-door-display-case: none; } /* Taifa's public identity, as on taifamining.co.tz's home page (/taifa): paper, ink, Taifa yellow and blue, * Bebas Neue / Lato / JetBrains Mono, and its own site photographs (copied onto the site by site_media). */ :root, :host, [data-hc-client="taifa"] { --hc-door-paper: #F4F2EC; --hc-door-card: #FFFFFF; --hc-door-ink: #121316; --hc-door-muted: #5C636E; /* 5.4:1 on paper, 6.1:1 on card */ --hc-door-line: rgba(18, 19, 22, 0.14); --hc-door-accent: #F7D100; /* Taifa yellow; ink on it is 12.5:1 */ --hc-door-accent-hover: #FFE34D; --hc-door-on-accent: #121316; --hc-door-link: #005FA8; /* Taifa blue deepened: 5.9:1 on paper, 6.6:1 on card */ --hc-door-focus: #0076D1; /* Taifa blue, for focus rings */ --hc-door-shade: rgba(11, 12, 14, 0.8); --hc-door-photo-work: url("/files/taifa-site-bulyanhulu-dusk.webp"); --hc-door-photo-people: url("/files/taifa-site-workshop.webp"); --hc-font-door-display: "HC Door Display", "Bebas Neue", "Arial Narrow", sans-serif; --hc-font-door-text: "HC Door Text", "Lato", "Helvetica Neue", Arial, sans-serif; --hc-font-door-mono: "HC Door Mono", "JetBrains Mono", ui-monospace, Menlo, monospace; --hc-door-display-case: uppercase; } /* browsers without linear() easing get the product's ease-out instead of a spring */ @supports not (transition-timing-function: linear(0, 1)) { :root, :host { --hc-spring-snappy: var(--hc-ease-out); --hc-spring-soft: var(--hc-ease-out); } }