/* ============================================================================ Athena Endpoint Platform — Tactical-ops design tokens ---------------------------------------------------------------------------- The single source of truth for the tactical-ops visual language (light "command console": cool-grey surfaces, a deep-cyan accent, and a display/body/mono type triad). These were first written on `.tac-login` in Pages/Login.razor.css, where the sign-in screen owned them alone. They are promoted to :root here — unchanged, same names, same values — so the pages converted after the login screen can consume them without re-declaring anything. :root is safe: no other stylesheet in the app declares or reads a `--tac-*` custom property, so nothing outside a `.tac-*` component can be affected by them existing. All three type families are SELF-HOSTED under wwwroot/fonts and wired up by athena-fonts.css — Athena runs air-gapped, so nothing is fetched from a CDN. The fallbacks after each family are the OS faces used when a woff2 is unavailable. Linked FIRST in _Host.cshtml (before shell.css / site.css) so any sheet may read them. ============================================================================ */ :root { /* surfaces */ --tac-s1: #ffffff; --tac-s2: #f3f6fa; --tac-line: #d3dbe6; --tac-line2: #b6c3d4; /* Four tints Mock/Settings/settings-sync.html uses that the set did not name. Added rather than hardcoded, because site.css had just been cleaned of loose hexes. --tac-line-soft is the one that matters most: the mock draws TWO line weights, this pale one for dividers INSIDE a card and --tac-line for the card's own edge. */ --tac-line-soft: #e7edf3; --tac-s3: #f6fafd; --tac-acc-tint: #eef5fa; --tac-acc-line: #dbe7f0; --tac-ok-tint: #edf8f0; /* Page ground: the cool-grey colour plus an octagon 4.8.8 tiling (Mock/Theme/background-patterns.html, .p-oct3) at 3% accent. It replaced the 32px square "blueprint" grid after customer feedback on 2026-10-08. Used by .main-content (shell.css) and the sign-in screen (LoginLayout.razor.css). 40px tile, corner cut 40/(2+sqrt2); adjacent tiles form the small squares. The pattern token is the whole IMAGE because a var() cannot go inside a data URI - this keeps the colour in the token sheet without a masked ::before layer, which would need .main-content to become a positioned stacking context. */ --tac-ground: #eef2f7; --tac-ground-pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Cpolygon points='11.72,0 28.28,0 40,11.72 40,28.28 28.28,40 11.72,40 0,28.28 0,11.72' fill='none' stroke='rgba(3,105,161,0.03)' stroke-width='1'/%3E%3C/svg%3E"); --tac-ground-pattern-size: 40px 40px; /* ink */ --tac-ink0: #0b1220; --tac-ink: #1e293b; --tac-ink2: #4b5b70; /* ink3 was #6b7c92: 4.27:1 on white, 3.79 on the ground - the top axe finding on 101 pages (Responsive-UI P1 audit, R1). #57677c clears 4.5:1 on every surface it sits on: white 5.77, --tac-s2 5.33, the ground 5.14, the rail 4.69. Still a step lighter than ink2. */ --tac-ink3: #57677c; /* accent + semantics */ --tac-acc: #0369a1; --tac-acc-deep: #075985; --tac-acc-dim: rgba(3, 105, 161, 0.12); /* text/icon ON an accent fill (the primary button). Not --tac-s1: the sidebar re-tunes that one. */ --tac-on-acc: #ffffff; --tac-ok: #15803d; --tac-warn: #b45309; --tac-crit: #dc2626; /* type stacks — all three families are self-hosted (see wwwroot/fonts) */ --tac-display: 'Chakra Petch', 'Bahnschrift', 'Segoe UI', sans-serif; --tac-body: 'IBM Plex Sans', 'Segoe UI', system-ui, sans-serif; --tac-mono: 'JetBrains Mono', 'Cascadia Mono', Consolas, monospace; /* ---- type scale -------------------------------------------------------- The tactical-ops pages were each derived from a mock whose label class was `font-size: 11px`, and every page then hardcoded its own sizes from there. The result was 24 distinct px values across the scoped sheets — including 9.5px, 10.5px, 11.5px and 12.5px, half-pixel distinctions nobody can see. That is not a scale; it is 1,000 independent decisions. Seven roles replace it. They are named for what the text IS, never for how big it is, so a future resize is one edit here and not a thousand: --tac-fs-display page titles, hero numerals --tac-fs-xl large figures --tac-fs-lg prominent numbers, section values --tac-fs-label uppercase mono labels --tac-fs-body body copy, nav, inputs, table cells --tac-fs-meta secondary text, sub-captions --tac-fs-micro table column headers, timestamps, chips, badges 12px is the FLOOR. The operator asked three times for larger text; every value below 12px folds up into --tac-fs-micro rather than being preserved. Breakpoint overrides inside @media in the page sheets are deliberate step-downs and are left as literals — they say "at THIS width, smaller", which is a different statement from "this text has THIS role". ------------------------------------------------------------------- */ /* The three heading roles are FLUID (Responsive-UI P2): they reach exactly the old fixed value (24 / 20 / 18px) at ~1200px and above, so desktop is unchanged, and step down smoothly on a phone instead of jumping at a breakpoint. The four text roles below stay fixed: 12px is the floor and phones already read 13-14px comfortably. */ --tac-fs-display: clamp(1.25rem, 1.05rem + 0.6vw, 1.5rem); --tac-fs-xl: clamp(1.125rem, 1rem + 0.35vw, 1.25rem); --tac-fs-lg: clamp(1rem, 0.95rem + 0.25vw, 1.125rem); --tac-fs-label: 16px; --tac-fs-body: 14px; --tac-fs-meta: 13px; --tac-fs-micro: 12px; /* ---- legacy aliases ---------------------------------------------------- These three shipped before the scale and are read by ~190 rules. They are kept, at bit-identical values, as aliases onto the roles above so no call site has to change and nothing moves. Do not re-point them at a different size — change the role token instead and both move together. --tac-label-size primary labels: card / KPI / chip / panel titles --tac-label-size-sm sub-captions that sit UNDER a primary label --tac-stat-value-size the count in a .tac-kpi card's figure row ------------------------------------------------------------------- */ --tac-label-size: var(--tac-fs-label); --tac-label-size-sm: var(--tac-fs-meta); --tac-stat-value-size: var(--tac-fs-lg); /* ---- breakpoints (Responsive-UI P2, .claude/docs/responsive-ui.md) ------ A custom property cannot be read inside @media, so these are the DOCUMENTED canonical values; every media query in the app uses the literal that matches: phone < 600px @media (max-width: 599.98px) simplified layout, cards tablet 600-767 @media (max-width: 767.98px) off-canvas drawer below 768 laptop 768-1023 @media (max-width: 1023.98px) icon rail desktop >= 1024 full sidebar; 1440 is the wide-desktop reference They ARE readable from script (getComputedStyle) and calc(), so JS and container sizing use these instead of repeating the numbers. */ --bp-phone: 600px; --bp-tablet: 768px; --bp-laptop: 1024px; --bp-desktop: 1440px; /* Minimum touch target at <= tablet (WCAG 2.5.5). */ --touch-target: 44px; }