/* =========================================================================
Hitech Design System — Core Tokens
-------------------------------------------------------------------------
THIS FILE IS THE THEME. It defines two things:
:root theme-AGNOSTIC primitives — the structural scale
and rhythm shared by every theme (spacing, radii,
type sizes, line heights, motion). These never
change between themes.
[data-theme="…"] a THEME — the brand identity: type families, the
colour palette, and the semantic mappings built on
it (--bg, --fg, --line, --bg-accent …). One theme
is shipped: "hitech".
The active theme is selected in ONE place: the data-theme attribute on
(see _Layout.cshtml → ).
TO ADD A THEME LATER:
1. Add a `[data-theme="yourtheme"] { … }` block below mirroring the
hitech one (same variable NAMES, your values).
2. Flip the attribute on .
Components (components.css) reference ONLY semantic tokens — never raw hex —
so they adopt any theme with zero component edits.
========================================================================= */
/* ---------- Web fonts (theme-independent assets) ---------- */
@font-face {
font-family: "Eurostile Extended";
src: url("/fonts/EurostileExt-Bla.otf") format("opentype");
font-weight: 900;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "GT Planar";
src: url("/fonts/GT-Planar-Regular.otf") format("opentype");
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "GT Planar";
src: url("/fonts/GT-Planar-Bold.otf") format("opentype");
font-weight: 700;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "GT Planar";
src: url("/fonts/GT-Planar-Italic-15-Regular.otf") format("opentype");
font-weight: 400;
font-style: italic;
font-display: swap;
}
/* =========================================================================
PRIMITIVES — theme-agnostic. Structural scale & rhythm, shared by all themes.
========================================================================= */
:root {
/* Type scale (desktop base) */
--fs-xs: 12px;
--fs-sm: 14px;
--fs-base: 16px;
--fs-md: 18px;
--fs-lg: 22px;
--fs-xl: 28px;
--fs-2xl: 36px;
--fs-3xl: 48px;
--fs-4xl: 64px;
--fs-5xl: 96px;
--fs-6xl: 144px;
/* Line heights */
--lh-tight: 0.95;
--lh-snug: 1.1;
--lh-body: 1.45;
--lh-loose: 1.7;
/* Letter-spacing */
--tracking-display: -0.02em; /* default display tracking (May 2026 retune) */
--tracking-display-md: -0.02em; /* 28–40 px */
--tracking-display-lg: -0.025em; /* 40–80 px */
--tracking-display-xl: -0.03em; /* 80–140 px */
--tracking-display-2xl:-0.035em; /* 140 px+ cover-title */
--tracking-caps: 0.08em; /* for ALL CAPS labels */
--tracking-mono: 0.02em;
/* Display leading — size-specific */
--lh-display-md: 0.98;
--lh-display-lg: 0.92;
--lh-display-xl: 0.88;
--lh-display-2xl: 0.86;
/* Spacing (8px base) */
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 24px;
--space-6: 32px;
--space-7: 48px;
--space-8: 64px;
--space-9: 96px;
--space-10: 128px;
/* Radii — Hitech is sharp & geometric. Use sparingly. */
--radius-0: 0px;
--radius-1: 2px;
--radius-2: 4px;
--radius-pill: 999px;
/* Elevation — shadows kept subtle; flatness preferred */
--shadow-0: none;
--shadow-1: 0 1px 2px rgba(0,0,0,0.06), 0 1px 1px rgba(0,0,0,0.04);
--shadow-2: 0 4px 12px rgba(0,0,0,0.08);
--shadow-3: 0 12px 32px rgba(0,0,0,0.12);
/* Motion */
--ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
--ease-in: cubic-bezier(0.4, 0, 1, 1);
--ease-io: cubic-bezier(0.4, 0, 0.2, 1);
--dur-fast: 120ms;
--dur-med: 220ms;
--dur-slow: 420ms;
/* Skew — the angular motif from the logotype.
DEPRECATED for titles and cover graphics (May 2026). No diagonal/skewed
elements on titles or display type. Retained only for legacy/non-display use. */
--skew-brand: -12deg;
}
/* =========================================================================
RESPONSIVE BREAKPOINTS — documented convention (NOT tokens).
-------------------------------------------------------------------------
CSS custom properties CANNOT be used inside @media conditions
(`@media (max-width: var(--x))` is invalid CSS), so the breakpoints are a
convention applied consistently in each component's own CSS — not variables.
Use these exact values:
max-width: 768px "narrow" — phones + small tablets. The primary mobile
target: stacked chrome, off-canvas filter
drawer, full-screen modals, card-stacked
DataTables.
max-width: 480px "compact" — only where the 768 rules still overflow on
the smallest phones.
Strategy is a DESKTOP-FIRST RETROFIT: the desktop rules are the base; each
component appends an `@media (max-width: 768px)` block (and 480 where needed)
at the FOOT of its own CSS file to adapt down. Layout follows the VIEWPORT
(CSS pixels, already normalised by the device-pixel-ratio via the
tag) — never user-agent device detection.
========================================================================= */
/* =========================================================================
THEME: "hitech" — Hitech brand identity. Type families + palette + semantics.
========================================================================= */
[data-theme="hitech"] {
/* Type families */
--font-display: "Eurostile Extended", "Eurostile", "Impact", "Oswald", sans-serif;
--font-sans: "GT Planar", "Inter", "Helvetica Neue", Arial, sans-serif;
--font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
/* Brand — Hitech Red */
--brand-red: #FF0001;
--brand-red-dark: #AD1F24;
--brand-red-deep: #6D1111;
--brand-red-light: #ED5C5E;
--brand-red-tint: #EDD2D2;
/* Status — non-brand states (bulk-import warnings) */
--status-warn: #8A6D00; /* import warning text */
--status-warn-tint: rgba(138, 109, 0, .12); /* import warning row */
/* Neutrals */
--black: #000000;
--ink: #0A0A0A; /* near-black for body text on white */
--graphite: #1A1A1A; /* near-black surface */
--gray-900: #2A2A2A;
--gray-700: #555555;
--gray-500: #BCBCBC;
--gray-300: #DADADA;
--gray-200: #ECECEC;
--gray-100: #EFEEED; /* warm off-white, primary paper tone */
--white: #FFFFFF;
/* Calendar colour tints — the curated palette for board colour coding, shared by
subscription colours and event colours (tokens mirrored in C# by SubscriptionColours).
Pale enough that black text stays legible; deliberately no red — red is the accent /
"mine" mark. The second band trades a touch of the pastel softness for more hue
range / optionality. */
--sub-sky: #CFE0F0;
--sub-mint: #D4E6D4;
--sub-sand: #F2E3C2;
--sub-lilac: #E0D8EE;
--sub-aqua: #CFE9E8;
--sub-tan: #EBDCCB;
--sub-slate: #DDE1E4;
--sub-pistachio: #E4EACA;
--sub-denim: #C9D4E4;
--sub-rose: #EBD8E0;
--sub-lemon: #F4EFC8;
--sub-peach: #F6E0CE;
--sub-teal: #A9D7CE;
--sub-amber: #F2CB7C;
--sub-plum: #D4B0D0;
--sub-olive: #C9CE92;
--sub-periwinkle: #BFC5EE;
--sub-clay: #E0B49C;
/* Semantic surfaces */
--bg: var(--white);
--bg-paper: var(--gray-100);
--bg-inverse: var(--black);
--bg-accent: var(--brand-red);
/* Semantic text */
--fg: var(--ink);
--fg-muted: var(--gray-700);
--fg-subtle: var(--gray-500);
--fg-inverse: var(--white);
--fg-accent: var(--brand-red);
/* Borders / lines */
--line: var(--gray-300);
--line-strong: var(--black);
--line-accent: var(--brand-red);
/* Focus / states */
--focus-ring: var(--brand-red);
--hover-bg: var(--gray-200);
--press-bg: var(--gray-300);
}
/* Subscription tint mapping — any element with data-colour="" gets --tint;
each surface (event bar, flyout dot, gutter chip, admin swatch) just consumes
var(--tint). Tokens are validated server-side against the same list. */
[data-colour="sky"] { --tint: var(--sub-sky); }
[data-colour="mint"] { --tint: var(--sub-mint); }
[data-colour="sand"] { --tint: var(--sub-sand); }
[data-colour="lilac"] { --tint: var(--sub-lilac); }
[data-colour="aqua"] { --tint: var(--sub-aqua); }
[data-colour="tan"] { --tint: var(--sub-tan); }
[data-colour="slate"] { --tint: var(--sub-slate); }
[data-colour="pistachio"] { --tint: var(--sub-pistachio); }
[data-colour="denim"] { --tint: var(--sub-denim); }
[data-colour="rose"] { --tint: var(--sub-rose); }
[data-colour="lemon"] { --tint: var(--sub-lemon); }
[data-colour="peach"] { --tint: var(--sub-peach); }
[data-colour="teal"] { --tint: var(--sub-teal); }
[data-colour="amber"] { --tint: var(--sub-amber); }
[data-colour="plum"] { --tint: var(--sub-plum); }
[data-colour="olive"] { --tint: var(--sub-olive); }
[data-colour="periwinkle"] { --tint: var(--sub-periwinkle); }
[data-colour="clay"] { --tint: var(--sub-clay); }
/* Event-colour tint mapping — parallel to the subscription map above, consumed only
when the board is in event-colour mode (.colour-mode--event, hicalendar.css). A bar
carries data-event-colour="" for its own event colour; --event-tint reuses the
same curated pastels. data-event-colour="" (uncoloured) sets nothing, so the
var(--event-tint, …) fallback paints the default chrome. */
[data-event-colour="sky"] { --event-tint: var(--sub-sky); }
[data-event-colour="mint"] { --event-tint: var(--sub-mint); }
[data-event-colour="sand"] { --event-tint: var(--sub-sand); }
[data-event-colour="lilac"] { --event-tint: var(--sub-lilac); }
[data-event-colour="aqua"] { --event-tint: var(--sub-aqua); }
[data-event-colour="tan"] { --event-tint: var(--sub-tan); }
[data-event-colour="slate"] { --event-tint: var(--sub-slate); }
[data-event-colour="pistachio"] { --event-tint: var(--sub-pistachio); }
[data-event-colour="denim"] { --event-tint: var(--sub-denim); }
[data-event-colour="rose"] { --event-tint: var(--sub-rose); }
[data-event-colour="lemon"] { --event-tint: var(--sub-lemon); }
[data-event-colour="peach"] { --event-tint: var(--sub-peach); }
[data-event-colour="teal"] { --event-tint: var(--sub-teal); }
[data-event-colour="amber"] { --event-tint: var(--sub-amber); }
[data-event-colour="plum"] { --event-tint: var(--sub-plum); }
[data-event-colour="olive"] { --event-tint: var(--sub-olive); }
[data-event-colour="periwinkle"] { --event-tint: var(--sub-periwinkle); }
[data-event-colour="clay"] { --event-tint: var(--sub-clay); }
/* Dark surface overrides (applied to black containers — topbar, modal headers).
Remaps the semantic tokens so the SAME component classes adapt automatically. */
.hitech-dark {
--bg: var(--black);
--bg-paper: var(--graphite);
--fg: var(--white);
--fg-muted: var(--gray-300);
--fg-subtle: var(--gray-500);
--line: var(--gray-900);
--hover-bg: var(--gray-900);
}
/* =========================================================================
Semantic typography classes
Hierarchy (per Hitech Brand Guidelines v01):
- Eurostile Extended Black is ONLY for short headlines/titles ≤ 12 words,
large stat numerals, and section counters. Upright, all caps. Do not
overuse — it diminishes its impact.
- GT Planar Regular carries everything else.
Display rules (May 2026 revision):
- No italics, canted forms, or skew transforms on display type or numerals.
- No descender punctuation (commas etc.) in titles ≥ 40 px.
- Tabular lining figures forced on every display selector + counter.
- Numeral "1" wrapped in `.k--one--lead` / `.k--one--trail` next to digits.
- Letter-pair joins tightened with `.k--tight` / `.k--push`.
- Tracking and leading: use the `--tracking-display-*` and `--lh-display-*` tokens.
========================================================================= */
/* Shared display behaviour — applied to every display/title selector and the section counter. */
.h-display, .t-display, .h1,
.h-display-md, .h-display-lg, .h-display-xl, .cover-title,
.counter, .counter-lg {
font-feature-settings: "kern" 1, "tnum" 1, "lnum" 1, "ss01" 1, "salt" 1, "calt" 1, "liga" 1;
font-variant-numeric: tabular-nums lining-nums;
font-kerning: normal;
text-rendering: optimizeLegibility;
font-style: normal;
}
/* Optical-kern utility spans — used inside any display class. */
.k--tight { letter-spacing: -.05em; }
.k--loose { letter-spacing: .01em; }
.k--push { margin-left: .03em; }
.k--one { margin: 0 -.08em; }
.k--one--lead { margin-right: -.08em; } /* 1 leads (e.g. "10", "128") */
.k--one--trail { margin-left: -.08em; } /* 1 trails (e.g. "01", "21") */
/* Display — Eurostile Extended Black, ALL CAPS, upright.
Used for section numbers, hero titles, stat numerals. */
.h-display,
.t-display {
font-family: var(--font-display);
font-weight: 900;
text-transform: uppercase;
letter-spacing: 0.02em;
line-height: var(--lh-tight);
color: var(--fg);
}
/* Page/section H1 — large Eurostile (short titles only) */
.h1 {
font-family: var(--font-display);
font-weight: 900;
text-transform: uppercase;
font-size: var(--fs-5xl);
line-height: var(--lh-display-xl);
letter-spacing: var(--tracking-display-xl);
color: var(--fg);
}
/* Display size variants — use these on .h-display containers to opt into
the size-specific tracking + leading pairings. */
.h-display-md, .t-display.is-md {
font-family: var(--font-display);
font-weight: 900;
text-transform: uppercase;
font-size: var(--fs-2xl);
line-height: var(--lh-display-md);
letter-spacing: var(--tracking-display-md);
color: var(--fg);
}
.h-display-lg, .t-display.is-lg {
font-family: var(--font-display);
font-weight: 900;
text-transform: uppercase;
font-size: var(--fs-4xl);
line-height: var(--lh-display-lg);
letter-spacing: var(--tracking-display-lg);
color: var(--fg);
}
.h-display-xl, .t-display.is-xl {
font-family: var(--font-display);
font-weight: 900;
text-transform: uppercase;
font-size: var(--fs-5xl);
line-height: var(--lh-display-xl);
letter-spacing: var(--tracking-display-xl);
color: var(--fg);
}
/* Cover-title — the very large title used on covers / openers. */
.cover-title {
font-family: var(--font-display);
font-weight: 900;
text-transform: uppercase;
font-size: var(--fs-6xl);
line-height: var(--lh-display-2xl);
letter-spacing: var(--tracking-display-2xl);
color: var(--fg);
}
/* Larger top-of-section counter (e.g. "01" set huge in a section divider) */
.counter-lg {
font-family: var(--font-display);
font-weight: 900;
font-size: var(--fs-6xl);
line-height: var(--lh-display-2xl);
letter-spacing: var(--tracking-display-2xl);
color: var(--brand-red);
}
/* H1-alt — GT Planar Regular for titles that run long or across multiple lines. */
.h1-alt {
font-family: var(--font-sans);
font-weight: 400;
font-size: var(--fs-3xl);
line-height: 1.1;
letter-spacing: -0.015em;
color: var(--fg);
}
/* Kicker / pull quote — GT Planar Regular, larger than body, smaller than
headlines. Use to bring important info forward. */
.kicker {
font-family: var(--font-sans);
font-weight: 400;
font-size: var(--fs-xl);
line-height: 1.35;
color: var(--fg);
max-width: 60ch;
}
/* Subhead in caps — GT Planar Bold, body-size or slightly larger. */
.subhead-caps {
font-family: var(--font-sans);
font-weight: 700;
font-size: var(--fs-base);
text-transform: uppercase;
letter-spacing: var(--tracking-caps);
color: var(--fg);
}
/* H2 — GT Planar bold, still strong */
.h2 {
font-family: var(--font-sans);
font-weight: 700;
font-size: var(--fs-2xl);
line-height: var(--lh-snug);
letter-spacing: var(--tracking-display);
color: var(--fg);
}
/* H3 — page title */
.h3 {
font-family: var(--font-sans);
font-weight: 700;
font-size: var(--fs-lg);
line-height: var(--lh-snug);
color: var(--fg);
}
/* Eyebrow / caps label */
.eyebrow {
font-family: var(--font-sans);
font-weight: 700;
font-size: var(--fs-xs);
text-transform: uppercase;
letter-spacing: var(--tracking-caps);
color: var(--fg-muted);
}
/* Section counter — "01", "02" — always Eurostile */
.counter {
font-family: var(--font-display);
font-weight: 900;
font-size: var(--fs-xl);
color: var(--brand-red);
letter-spacing: 0;
}
/* Body */
.p, p.body {
font-family: var(--font-sans);
font-weight: 400;
font-size: var(--fs-base);
line-height: var(--lh-body);
color: var(--fg);
}
.p--sm { font-size: var(--fs-sm); }
.p--lg { font-size: var(--fs-md); }
/* Small muted caption */
.caption {
font-family: var(--font-sans);
font-size: var(--fs-xs);
color: var(--fg-muted);
line-height: var(--lh-body);
}
/* Footer mark — "MONTH.YEAR Hitech | Document title" pattern */
.footer-mark {
font-family: var(--font-sans);
font-size: 10px;
text-transform: uppercase;
letter-spacing: var(--tracking-caps);
color: var(--fg-muted);
}
/* Mono for data / telemetry */
.mono {
font-family: var(--font-mono);
font-variant-numeric: tabular-nums;
letter-spacing: var(--tracking-mono);
}