/* ============================================================================
Abrq Data — design tokens (the single source of truth)
Every product consumes these CSS variables (mapped into Tailwind in index.css).
No product code should hardcode a hex or a one-off size — use a token.
Direction: "TELEGRAPH" — أبرق = to telegraph. The brand's emerald lineage,
relay green + brass on bond paper (light) and DIP console black (dark),
with a Morse dot–dash signature.
Every value is custom — deliberately NOT a Tailwind palette stop.
Internal tools (dip, mgmt) default `.dark`; external surfaces (solution,
deliver, docs) default light. Both tiers are defined here from day one.
============================================================================ */
:root {
/* ---- semantic colors: LIGHT — "bond paper" (external surfaces default) --- */
--bg: #f2f3ee; /* bond paper — warm-grey green cast, not white */
--surface: #fafaf7; /* cards sit lighter than the desk */
--surface-2: #e7eadf; /* hover / fills */
--border: #d2d8c9;
--ink: #1b241f; /* carbon */
--muted: #58675f;
--primary: #136c4e; /* relay green — AA on bg/surface */
--primary-ink: #f7faf6;
--primary-soft: #dcede4;
--accent: #8a5e10; /* brass — telegraph-key brass, AA text on light */
--accent-soft: #f2e8d0;
--signal: #177a52; /* "ok / live / transmitting" */
--warn: #8a5e10;
--warn-soft: #f2e8d0;
--error: #a8402f; /* oxide red */
--error-soft: #f4dcd5;
--ring: #8a5e10; /* the brass focus ring — deliberate signature */
/* ---- type: the IBM Plex family, used whole ------------------------------- */
--font-sans: "IBM Plex Sans", ui-sans-serif, system-ui, sans-serif;
--font-display: "IBM Plex Sans", ui-sans-serif, system-ui, sans-serif;
--font-arabic: "IBM Plex Sans Arabic", "IBM Plex Sans", ui-sans-serif, sans-serif;
--font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
/* ---- radii: ledger-square, not bubble ------------------------------------ */
--radius-sm: 0.125rem;
--radius: 0.25rem;
--radius-lg: 0.375rem;
--radius-xl: 0.75rem;
/* ---- shadows: flat, paper-on-desk (borders do the separating) ------------ */
--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);
}
/* ---- DARK MODE (.dark on ) — "console black" -------------------------
The product dark MODE: an environment, not a brand statement. Neutral ramp
matched to the Abrq DIP dashboards (owner decision): a cool blue-black, not
green-cast. Accents stay abrq-ui (relay green + brass) — the dual signal
keeps this off the banned near-black+single-green default. */
.dark {
--bg: #0b0e15; /* DIP console black — cool, near-neutral */
--surface: #11151d;
--surface-2: #181d27;
--border: #262d3a;
--ink: #e7eaf0;
--muted: #94a0ae;
--primary: #46c28e; /* relay green, lit */
--primary-ink: #0b0e15;
--primary-soft: #11332a;
--accent: #d9a13b; /* brass, lit */
--accent-soft: #332a12;
--signal: #4fd09a;
--warn: #e5b85c;
--warn-soft: #332a12;
--error: #e08a7a;
--error-soft: #3a201b;
--ring: #d9a13b;
--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);
}
/* ---- BRAND BAND (.abrq-invert) — "deep emerald" -----------------------------
ONE inverted section inside a light external page (heroes, footers): identity,
not environment — the abrqdata.com hero green. Distinct from .dark on purpose
(G7, abrq-solution pilot exit). Ramp AA-verified on both bg and surface.
Rule of use: at most one inverted band per screen; pair with `bg-bg text-ink`
on the wrapper. Requires the `@theme inline` mapping (see theme.css) so the
tokens resolve inside a NESTED scope. */
.abrq-invert {
--bg: #053527; /* the brand's deep emerald — the abrqdata.com hero green */
--surface: #074131;
--surface-2: #094636;
--border: #155941;
--ink: #e8ede5;
--muted: #9bb0a3; /* lightened — 4.5:1 held on the lighter emerald surface */
--primary: #46c28e;
--primary-ink: #04241b;
--primary-soft: #0b4a36;
--accent: #d9a13b;
--accent-soft: #3d3110;
--signal: #4fd09a;
--warn: #e5b85c;
--warn-soft: #3d3110;
--error: #e69585; /* lightened — 4.5:1 held on --surface */
--error-soft: #3a201b;
--ring: #d9a13b;
--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);
}
/* @abrq/ui theme layer — for host apps that already run Tailwind v4.
Import it AFTER `@import "tailwindcss"`:
@import "tailwindcss";
@import "@abrq/ui/theme.css";
@source "../node_modules/@abrq/ui/dist"; // so utilities used by the components are generated
Provides the Abrq tokens + the @theme mapping (so `bg-primary`, `text-ink`, … resolve and
switch under `.dark`) + the signature animations. It deliberately does NOT import Tailwind
or fonts, and does NOT set body bg/color/font — so it never clobbers the host's own look.
Load IBM Plex Sans / IBM Plex Sans Arabic / IBM Plex Mono in the host app.
Import the tokens FIRST so the @theme var() references resolve while Tailwind builds:
@import "@abrq/ui/tokens.css";
@import "@abrq/ui/theme.css"; */
@theme inline {
--color-bg: var(--bg);
--color-surface: var(--surface);
--color-surface-2: var(--surface-2);
--color-border: var(--border);
--color-ink: var(--ink);
--color-muted: var(--muted);
--color-primary: var(--primary);
--color-primary-ink: var(--primary-ink);
--color-primary-soft: var(--primary-soft);
--color-accent: var(--accent);
--color-accent-soft: var(--accent-soft);
--color-signal: var(--signal);
--color-warn: var(--warn);
--color-warn-soft: var(--warn-soft);
--color-error: var(--error);
--color-error-soft: var(--error-soft);
--color-ring: var(--ring);
}
/* Colours only — they map a Tailwind key (--color-X) to a distinct token (--X), so no
self-reference. `inline` is REQUIRED: plain @theme would freeze --color-X: var(--X) at
:root, so a NESTED re-theme scope (.abrq-invert inside a light page) silently renders
light — utilities must inline var(--X) so it resolves per element. (.dark happened to
work without it only because .dark sits on = :root.)
Radii/shadows/fonts are consumed in components via arbitrary values
(e.g. rounded-[var(--radius-lg)], shadow-[var(--shadow-sm)]) so they need no @theme key
here — which also avoids colliding with a host app's own font/radius theme. */
/* Non-intrusive base (no body clobber). */
[lang="ar"],
[dir="rtl"] {
font-family: var(--font-arabic);
}
:focus-visible {
outline: 2px solid var(--ring); /* the brass key — branded focus */
outline-offset: 2px;
border-radius: 2px;
}
.tabular {
font-variant-numeric: tabular-nums;
font-family: var(--font-mono);
}
/* The system's labeling voice: mono tracked caps (section headers, table heads,
form labels). This — not decoration — 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;
}
/* Arabic fallback for the label voice: IBM Plex Mono has no Arabic glyphs, Arabic
has no uppercase, and positive letter-spacing detaches Arabic joining strokes.
The label ROLE (small, quiet, structural) carries — set in the Arabic companion
face, semibold, zero tracking. */
[dir="rtl"] .abrq-label {
font-family: var(--font-arabic);
font-weight: 600;
letter-spacing: 0;
}
/* Dot–dash rule: a divider in the Morse rhythm. Color via currentColor
(e.g. ). Pattern is direction-agnostic. */
.abrq-rule {
height: 1px;
background-image: repeating-linear-gradient(
90deg,
currentColor 0,
currentColor 2px,
transparent 2px,
transparent 7px,
currentColor 7px,
currentColor 15px,
transparent 15px,
transparent 20px
);
}
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
transition-duration: 0.01ms !important;
}
}
/* ---- Signature motion: transmission, never pulse --------------------------
BANNED in this system: ECG/heartbeat/vitals waveforms, radar pings, and any
animated horizontal "trace". Motion = elements lighting in transmission
order (left to right), or a Morse blink pattern — rhythms of code. */
/* One-shot: a Morse band "arrives" element by element (delay set per element). */
@keyframes abrq-tx {
from {
opacity: 0.15;
}
to {
opacity: 1;
}
}
.abrq-tx {
animation: abrq-tx 0.4s var(--ease) both;
}
/* Looping: marching transmission, for loading states (delay set per element). */
@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;
}
/* RETIRED (owner ruling 2026-06-11, abrq-dip rollout): the `.abrq-morse`
Morse-L live blink. Live indicators are STATIC signal-colour dots — no
blinking, no pulsing, no flashing of any rhythm. */
/* @abrq/ui prose layer — long-form reading for rendered-Markdown surfaces (G11).
Plain CSS, tokens only — works in Tailwind apps (apply `abrq-prose` to the
rendered-HTML container) AND in no-build consumers (G10) that vendor this
file. Both tiers and `.abrq-invert` come free via the custom properties.
Voice: calm utility scale (not marketing display), ~70ch measure on flow
content with code blocks and tables released to the full container width,
light surface-card code blocks (the DocsDemo precedent — never a dark slab
inside a light page; `.abrq-invert` is for brand bands, not code), GFM
tables in the Th mono-caps voice.
First consumer: abrq-docs. Next: abrq-deliver release notes, dip/mgmt help
panels. */
.abrq-prose {
color: var(--ink);
font-family: var(--font-sans);
line-height: 1.65;
}
/* Measure: flow content reads at ~70ch; block artifacts use the container. */
.abrq-prose > * {
max-width: 70ch;
}
.abrq-prose > pre,
.abrq-prose > table,
.abrq-prose > figure,
.abrq-prose > .abrq-prose-wide {
max-width: none;
}
/* ---- headings: utility scale, display voice only at h1 ------------------- */
.abrq-prose h1 {
margin: 0 0 1rem;
font-family: var(--font-display);
font-size: 1.875rem;
font-weight: 600;
letter-spacing: -0.01em;
line-height: 1.2;
}
.abrq-prose h2 {
margin: 2.5rem 0 0.75rem;
padding-top: 0.6rem;
border-top: 1px solid var(--border);
font-size: 1.35rem;
font-weight: 600;
line-height: 1.3;
}
.abrq-prose h3 {
margin: 1.6rem 0 0.5rem;
font-size: 1.1rem;
font-weight: 600;
line-height: 1.35;
}
.abrq-prose h4 {
margin: 1.25rem 0 0.4rem;
font-size: 1rem;
font-weight: 600;
}
/* Heading anchors: hover-revealed AND keyboard-revealed (a11y — a hover-only
affordance is invisible to keyboard users). Markup: a trailing
# inside the heading. */
.abrq-prose .heading-anchor {
margin-inline-start: 0.4em;
color: var(--muted);
font-size: 0.85em;
text-decoration: none;
opacity: 0;
}
.abrq-prose :is(h1, h2, h3, h4):hover .heading-anchor,
.abrq-prose .heading-anchor:focus-visible {
opacity: 1;
}
/* ---- flow ------------------------------------------------------------------ */
.abrq-prose p {
margin: 0 0 1rem;
}
.abrq-prose a {
color: var(--primary);
text-decoration: none;
}
.abrq-prose a:hover {
text-decoration: underline;
}
.abrq-prose strong {
font-weight: 600;
}
.abrq-prose ul,
.abrq-prose ol {
margin: 0 0 1rem;
padding-inline-start: 1.4rem;
}
.abrq-prose li + li {
margin-top: 0.3rem;
}
.abrq-prose img {
max-width: 100%;
height: auto;
border-radius: var(--radius);
}
.abrq-prose blockquote {
margin: 0 0 1rem;
padding-inline-start: 1rem;
border-inline-start: 2px solid var(--border);
color: var(--muted);
}
/*
speaks the dot–dash rhythm on product surfaces (same pattern as
.abrq-rule; color via the border token). */
.abrq-prose hr {
height: 1px;
margin: 2rem 0;
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
);
}
/* ---- code: mono ink on a light surface card -------------------------------- */
.abrq-prose code {
font-family: var(--font-mono);
font-size: 0.9em;
background: var(--surface-2);
border-radius: var(--radius-sm);
padding: 0.1em 0.35em;
}
.abrq-prose pre {
margin: 0 0 1rem;
padding: 1rem;
overflow-x: auto;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
font-family: var(--font-mono);
font-size: 0.875rem;
line-height: 1.6;
}
.abrq-prose pre code {
background: transparent;
border-radius: 0;
padding: 0;
font-size: inherit;
}
.abrq-prose kbd {
font-family: var(--font-mono);
font-size: 0.85em;
background: var(--surface-2);
border: 1px solid var(--border);
border-bottom-width: 2px;
border-radius: var(--radius-sm);
padding: 0.05em 0.35em;
}
/* ---- GFM tables: the Th voice ----------------------------------------------- */
.abrq-prose table {
margin: 0 0 1rem;
width: 100%;
border-collapse: collapse;
font-size: 0.9375rem;
}
.abrq-prose th {
font-family: var(--font-mono);
font-size: 0.6875rem;
font-weight: 500;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--muted);
background: var(--surface);
text-align: start;
}
.abrq-prose th,
.abrq-prose td {
border: 1px solid var(--border);
padding: 0.45rem 0.6rem;
vertical-align: top;
}
/* GFM task lists */
.abrq-prose input[type="checkbox"] {
accent-color: var(--primary);
}
:root { color-scheme: light; }
* { box-sizing: border-box; }
body {
margin: 0;
min-height: 100vh;
display: grid;
place-items: center;
font-family: var(--font-sans);
background: var(--bg);
color: var(--ink);
}
main {
width: min(92vw, 380px);
padding: 2rem;
border: 1px solid var(--border);
border-radius: var(--radius-lg);
background: var(--surface);
box-shadow: var(--shadow-sm);
}
.callsign { margin-bottom: 1rem; color: var(--primary); }
h1 { margin: 0 0 0.35rem; font-size: 1.5rem; font-weight: 600; letter-spacing: -0.01em; }
p { margin: 0 0 1.25rem; color: var(--muted); }
label { display: block; margin: 0.9rem 0 0.35rem; color: var(--muted); }
input {
width: 100%;
padding: 0.72rem 0.8rem;
border: 1px solid var(--border);
border-radius: var(--radius);
background: var(--bg);
color: var(--ink);
font: inherit;
}
button {
width: 100%;
margin-top: 1.25rem;
padding: 0.78rem 1rem;
border: 0;
border-radius: var(--radius-lg);
background: var(--primary);
color: var(--primary-ink);
font: inherit;
font-weight: 600;
cursor: pointer;
}
button:hover { filter: brightness(0.95); }
.error {
margin: 0 0 1rem;
padding: 0.5rem 0.75rem;
border-radius: var(--radius);
background: var(--error-soft);
color: var(--error);
font-weight: 600;
}