/* ============================================================ * Design tokens + reset + utilities. * Layered first; everything below cascades from here. * Logical properties used throughout so RTL flips cleanly. * * The colour / type / radii / shadow / motion values below are the * Abrq "TELEGRAPH" design tokens, MIRRORED from the canonical source * of truth at abrq-ui `src/tokens.css` (relay green + brass on bond * paper / DIP console black; every value custom, none a Tailwind stop). * Re-author here against these tokens — never hardcode a hex in a * component. Internal tool → dark is the default (``), * with a light toggle; both tiers are defined together. * abrq-ui: ../../abrq-ui/design-system/CLAUDE.md * * `.light` re-declares the light tier on a subtree (canonical values AND * the alias layer — aliases must re-resolve in scope, the abrq-ui G9 * lesson). Used by surfaces that are paper regardless of console theme: * the customer-facing print documents (`.doc.light`, UXB-21). * ============================================================ */ :root, .light { /* ---- Telegraph semantic colours — LIGHT ("bond paper") ---------------- */ --bg: #f2f3ee; /* bond paper — warm grey-green, not white */ --surface: #fafaf7; /* cards, sidebar, table head */ --surface-2: #e7eadf; /* hovers / fills */ --border: #d2d8c9; /* hairlines */ --ink: #1b241f; /* carbon text */ --muted: #58675f; /* secondary text (AA on bg/surface) */ --primary: #136c4e; /* relay green — actions, active nav */ --primary-ink: #f7faf6; /* text on primary */ --primary-soft: #dcede4; /* soft fills */ --accent: #8a5e10; /* brass — the exception colour */ --accent-soft: #f2e8d0; --signal: #177a52; /* ok / live / transmitting */ --warn: #8a5e10; /* brass pair */ --warn-soft: #f2e8d0; --error: #a8402f; /* oxide red */ --error-soft: #f4dcd5; --ring: #8a5e10; /* the brass focus ring */ /* ---- Type: the IBM Plex family, used whole (self-hosted below) -------- */ --font-sans: "IBM Plex Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; --font-arabic: "IBM Plex Sans Arabic", "IBM Plex Sans", ui-sans-serif, system-ui, sans-serif; --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, "Cascadia Mono", Consolas, monospace; /* ---- Radii: ledger-square, not bubble (2/4/6/12) --------------------- */ --radius-sm: 2px; --radius: 4px; --radius-lg: 6px; --radius-xl: 12px; --radius-pill: 4px; /* "pills" are square key-contacts here */ /* ---- Shadows: flat, paper-on-desk (borders do the separating) -------- */ --shadow-xs: 0 1px 2px rgba(27, 36, 31, 0.05); --shadow-sm: 0 1px 2px rgba(27, 36, 31, 0.05); --shadow: 0 2px 6px rgba(27, 36, 31, 0.07); --shadow-lg: 0 10px 28px rgba(27, 36, 31, 0.12); /* ---- Motion ---------------------------------------------------------- */ --motion-fast: 120ms; --motion: 200ms; --motion-slow: 360ms; --ease: cubic-bezier(0.2, 0.6, 0.2, 1); --transition: var(--motion-fast) var(--ease); /* ---- Spacing scale (4-px base) — mgmt structural, kept --------------- */ --space-0: 0; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-7: 32px; --space-8: 40px; --space-9: 56px; --space-10: 72px; /* ---- Type scale — mgmt structural, kept ----------------------------- */ --text-xs: 12px; --text-sm: 13px; --text-base: 14px; --text-md: 15px; --text-lg: 17px; --text-xl: 20px; --text-2xl: 24px; --text-3xl: 30px; --leading-tight: 1.2; --leading-normal: 1.5; /* ---- Layout — mgmt structural, kept --------------------------------- */ --sidebar-w: 248px; --topbar-h: 56px; --content-max: 1240px; /* ---- Touch targets (WCAG 2.5.5: ≥ 44 px on touch) ------------------- */ --touch-min: 44px; --control-h: 40px; /* desktop control height */ --control-h-mobile: 44px; /* ==================================================================== * Compatibility aliases — this repo's legacy semantic names mapped onto * the Telegraph tokens above, so component CSS reads its familiar names * while resolving to system tokens. These follow `.dark` automatically * (var() resolves lazily). The banned `--brand-*` Tailwind-stop scale was * swept out and deleted (Phase 3); these semantic aliases remain as this * repo's naming layer over the canonical Telegraph tokens. * ==================================================================== */ --bg-deep: var(--bg); --surface-soft: var(--surface-2); --surface-hover: var(--surface-2); --border-strong: var(--border); --border-focus: var(--primary); --text: var(--ink); --text-soft: var(--ink); --text-muted: var(--muted); --text-on-dark:var(--ink); --text-inverse:var(--primary-ink); /* info/success TEXT rides --primary, not --signal: signal-on-primary-soft measured 4.38 in the light tier (< AA 4.5 — UX P0 baseline, docs/design/evidence/p0-baseline.md); primary-on-primary-soft measures 5.26 / 6.12. --signal remains for dots/fills where AA-on-soft doesn't apply. */ --info: var(--primary); --info-soft: var(--primary-soft); --info-border: var(--border); --success: var(--primary); --success-soft: var(--primary-soft); --success-border:var(--border); --warn-border: var(--accent); --danger: var(--error); --danger-soft: var(--error-soft); --danger-border: var(--error); } /* ---- DARK MODE (.dark on ) — DIP "console black" ----------------- Default tier for this internal tool. Only the canonical tokens are overridden; every alias above follows automatically. */ .dark { --bg: #0b0e15; --surface: #11151d; --surface-2: #181d27; --border: #262d3a; --ink: #e7eaf0; --muted: #94a0ae; --primary: #46c28e; --primary-ink: #0b0e15; --primary-soft: #11332a; --accent: #d9a13b; --accent-soft: #332a12; --signal: #4fd09a; --warn: #e5b85c; --warn-soft: #332a12; --error: #e08a7a; --error-soft: #3a201b; --ring: #d9a13b; --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.3); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3); --shadow: 0 2px 8px rgba(0, 0, 0, 0.35); --shadow-lg: 0 14px 36px rgba(0, 0, 0, 0.5); } /* ============================================================ * Self-hosted IBM Plex (no build step — static woff2 in /fonts). * Files are vendored under public/fonts/. Each face degrades to the * system fallback in the stack until the woff2 is present. * ============================================================ */ @font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("/static/fonts/ibm-plex-sans-400.woff2") format("woff2"); } @font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 500; font-display: swap; src: url("/static/fonts/ibm-plex-sans-500.woff2") format("woff2"); } @font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 600; font-display: swap; src: url("/static/fonts/ibm-plex-sans-600.woff2") format("woff2"); } @font-face { font-family: "IBM Plex Sans Arabic"; font-style: normal; font-weight: 400; font-display: swap; src: url("/static/fonts/ibm-plex-sans-arabic-400.woff2") format("woff2"); } @font-face { font-family: "IBM Plex Sans Arabic"; font-style: normal; font-weight: 600; font-display: swap; src: url("/static/fonts/ibm-plex-sans-arabic-600.woff2") format("woff2"); } @font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("/static/fonts/ibm-plex-mono-400.woff2") format("woff2"); } @font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("/static/fonts/ibm-plex-mono-500.woff2") format("woff2"); } /* ------------------------------------------------------------ */ /* Reset */ /* ------------------------------------------------------------ */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { font-family: var(--font-sans); font-size: var(--text-base); line-height: var(--leading-normal); color: var(--ink); background: var(--bg); /* flat — borders do the separating */ min-height: 100vh; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } img, svg { display: block; max-width: 100%; } svg { flex-shrink: 0; } svg:not([width]):not([height]) { width: 1em; height: 1em; } button, input, select, textarea { font: inherit; color: inherit; } button { cursor: pointer; } a { color: var(--primary); text-decoration: none; transition: color var(--transition); } a:hover { color: var(--primary); text-decoration: underline; } h1, h2, h3, h4 { color: var(--ink); font-weight: 650; margin: 0; } h1 { font-size: var(--text-2xl); line-height: var(--leading-tight); } h2 { font-size: var(--text-xl); line-height: var(--leading-tight); } h3 { font-size: var(--text-lg); line-height: var(--leading-tight); } h4 { font-size: var(--text-md); line-height: var(--leading-tight); } p { margin: 0; } ::selection { background: var(--accent-soft); color: var(--ink); } /* ------------------------------------------------------------ */ /* Telegraph idioms — ported from abrq-ui theme.css (the plain-CSS */ /* parts; the Tailwind @theme block does not apply here). See G-M1. */ /* ------------------------------------------------------------ */ /* The labeling voice: mono tracked caps (section heads, table heads, form labels, KPI labels). This is the Telegraph idiom in the chrome. */ .abrq-label { font-family: var(--font-mono); font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); } /* Arabic fallback (G2): Plex Mono has no Arabic glyphs, Arabic has no uppercase, and tracking detaches joining strokes — the ROLE carries. */ [dir="rtl"] .abrq-label { font-family: var(--font-arabic); font-weight: 600; letter-spacing: 0; text-transform: none; } /* Numbers are data: mono tabular figures for metrics / IDs / counts. */ .tabular { font-variant-numeric: tabular-nums; font-family: var(--font-mono); } /* Dot–dash rule: a divider in the Morse rhythm. Colour via currentColor. */ .abrq-rule { height: 1px; border: 0; color: var(--border); background-image: repeating-linear-gradient( 90deg, currentColor 0, currentColor 2px, transparent 2px, transparent 7px, currentColor 7px, currentColor 15px, transparent 15px, transparent 20px ); } /* Signature motion: transmission, never pulse. (ECG/heartbeat/radar-ping and continuous horizontal traces are banned — abrq-ui §1.) */ @keyframes abrq-tx { from { opacity: 0.15; } to { opacity: 1; } } .abrq-tx { animation: abrq-tx 0.4s var(--ease) both; } @keyframes abrq-tx-loop { 0%, 15% { opacity: 0.15; } 35%, 60% { opacity: 1; } 80%, 100% { opacity: 0.15; } } .abrq-tx-loop { animation: abrq-tx-loop 1.4s var(--ease) infinite; } /* Live blink = Morse letter L (·–··) — asymmetric, reads as code. */ @keyframes abrq-morse { 0%, 7.4% { opacity: 1; } 7.5%, 14.9% { opacity: 0.25; } 15%, 37.4% { opacity: 1; } 37.5%, 44.9% { opacity: 0.25; } 45%, 52.4% { opacity: 1; } 52.5%, 59.9% { opacity: 0.25; } 60%, 67.4% { opacity: 1; } 67.5%, 100% { opacity: 0.25; } } .abrq-morse { animation: abrq-morse 2s linear infinite; } /* The callsign band: "ABRQ" in Morse (·– –··· ·–· ––·–). Static markup (G-M2) — dots/dashes from currentColor, transmission-order arrival via per-element delay set inline. */ .morse-band { display: inline-flex; align-items: center; gap: 4px; color: var(--primary); line-height: 1; } .morse-band__sym { display: inline-flex; gap: 3px; align-items: center; } .morse-band__sym + .morse-band__sym { margin-inline-start: 7px; } .morse-band i { display: block; block-size: 3px; border-radius: 1px; background: currentColor; } .morse-band i.dot { inline-size: 3px; } .morse-band i.dash { inline-size: 11px; } /* ------------------------------------------------------------ */ /* Utilities — kept tiny, only what's reused 3+ times */ /* ------------------------------------------------------------ */ .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } .muted { color: var(--muted); } .subtle { color: var(--ink); } .danger { color: var(--error); } .success { color: var(--signal); } .warn { color: var(--accent); } .nowrap { white-space: nowrap; } .prewrap { white-space: pre-wrap; } .truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .fine { font-size: var(--text-xs); } .code-sm { font-size: var(--text-xs); word-break: break-all; } .row { display: flex; gap: var(--space-3); align-items: center; } .row--compact { gap: var(--space-2); } .row--end { display: flex; gap: var(--space-3); align-items: center; justify-content: flex-end; } .row--between { justify-content: space-between; } .row--wrap { flex-wrap: wrap; } .stack { display: flex; flex-direction: column; gap: var(--space-3); } .stack-tight { display: flex; flex-direction: column; gap: var(--space-1); } .stack-loose { display: flex; flex-direction: column; gap: var(--space-6); } .grow { flex: 1 1 auto; min-width: 0; } /* Focus ring — the brass key (abrq-ui): a 2px solid outline, branded. */ :focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; border-radius: 2px; }