/* ============================================================
CODEX — Design System
codex.css · single, self-contained foundation
Codex is a dark, engineered, abstract design system: a deep-indigo
ground, faceted-glass primitives drawn in thin light edges with
luminous nodes, and a minimal geometric-sans voice. Cool by
default, signed in a single warm amber accent.
This file is fully self-contained — zero external variables. Link it alone:
TYPE — one geometric family, used across the whole system:
• Space Grotesk ......... display, labels, body, numerals
Minimal and cool by intent. Numerals are tabular everywhere.
============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=Jost:wght@400;500;600&display=swap');
:root {
/* ---- GROUND (the dark stage) ----------------------------------- */
--cdx-ground: #07091f; /* deepest base — page background */
--cdx-ground-core: #1a2258; /* indigo core of the radial glow */
--cdx-ground-mid: #0c1033; /* mid stop of the radial ground */
--cdx-surface: #0d1130; /* raised card / panel surface */
--cdx-surface-deep: #0b0f30; /* recessed / inner surface */
/* The signature ground gradient — apply to any full-bleed stage. */
--cdx-ground-grad:
radial-gradient(1300px 900px at 50% 30%,
var(--cdx-ground-core) 0%, var(--cdx-ground-mid) 56%, var(--cdx-ground) 100%); /* @kind other */
/* ---- FACETED-GLASS PRIMITIVES ---------------------------------- */
/* The motif is built from three ink primitives over the ground:
translucent FACES, light EDGES, and luminous NODES. */
--cdx-face: #ffffff; /* polygon fill (low opacity) */
--cdx-edge: rgba(255,255,255,0.60); /* primary wire edge */
--cdx-edge-bright: rgba(255,255,255,0.85); /* front / silhouette edge */
--cdx-edge-faint: rgba(255,255,255,0.18); /* back / hidden edge */
--cdx-node: #ffffff; /* vertex node fill */
--cdx-node-glow: rgba(255,255,255,0.90); /* node halo colour */
/* Tunable knobs the FacetedGlyph component drives per-instance. */
--cdx-edge-w: 0.9; /* @kind other */ /* base edge stroke width (px in 300 vb) */
--cdx-glow: 3px; /* node drop-shadow blur radius */
/* ---- ACCENTS (the single warm signature) ----------------------- */
/* Codex is cool by default. One warm amber accent signs the system
— luminous nodes, rules, and the wordmark when wanted. */
--cdx-amber: #D48628; /* catalyst amber — warm node / rule */
--cdx-amber-glow: rgba(212,134,40,0.95);
--cdx-amber-deep: #b06e1d; /* pressed / hover amber */
--cdx-amber-soft: rgba(212,134,40,0.14); /* tint fill (chips) */
--cdx-ember: #B52127; /* deep ember — rules / "live" badge */
--cdx-ember-soft: rgba(181,33,39,0.16); /* tint fill */
--cdx-on-amber: #0a0c1f; /* ink that sits on an amber fill */
/* ---- BRAND / LOGO ---------------------------------------------- */
/* The Codex mark is a C-ring enclosing an ×, in its own colours —
an indigo ring + amber ×. The logotype is set in Jost — a clean
geometric face — wide-tracked, all-caps. */
--cdx-brand-indigo: #1A237E; /* logo ring on light grounds */
--cdx-logo-font: 'Jost', 'Futura', 'Century Gothic', sans-serif;
--cdx-logo-spacing: 0.2em;
/* ---- TEXT (on the dark ground) --------------------------------- */
/* Tuned for WCAG AA on the indigo ground (#07091f–#0d1130):
muted ≈ 8.6:1, soft ≈ 5.6:1, faint ≈ 4.7:1 (AA for ≥16px / UI text). */
--cdx-text: #ffffff;
--cdx-text-muted: rgba(255,255,255,0.68);
--cdx-text-soft: rgba(255,255,255,0.54);
--cdx-text-faint: rgba(255,255,255,0.48);
/* ---- LINES & BORDERS ------------------------------------------- */
--cdx-line: rgba(255,255,255,0.10); /* hairline on dark */
--cdx-line-strong: rgba(255,255,255,0.16);
/* ---- ELEVATION (glow, not shadow) ------------------------------ */
--cdx-elev-1: 0 1px 0 rgba(255,255,255,0.04) inset, 0 8px 30px rgba(0,0,0,0.45);
--cdx-elev-2: 0 1px 0 rgba(255,255,255,0.06) inset, 0 18px 50px rgba(0,0,0,0.55);
/* ---- RADII ----------------------------------------------------- */
/* Tight & schematic — crisp corners that echo the faceted vertices.
Circles (nodes, status, avatars) and linear meters stay round. */
--cdx-radius-sm: 2px;
--cdx-radius: 3px;
--cdx-radius-lg: 4px;
/* ---- MOTION & FOCUS -------------------------------------------- */
/* Calm ease-out, no bounce. Hover darkens; press nudges ~1px. */
--cdx-dur: 180ms; /* @kind other */
--cdx-ease: cubic-bezier(0.22, 0.61, 0.36, 1); /* @kind other */
--cdx-focus: 0 0 0 3px rgba(212,134,40,0.38);
/* ---- ICONOGRAPHY ----------------------------------------------- */
/* Lucide, drawn thin to match the hairline faceted-glass edges. */
--cdx-icon-stroke: 1.4;
/* ---- SPACING SCALE (4px base) ---------------------------------- */
--cdx-space-1: 4px;
--cdx-space-2: 8px;
--cdx-space-3: 12px;
--cdx-space-4: 16px;
--cdx-space-5: 24px;
--cdx-space-6: 32px;
--cdx-space-7: 48px;
--cdx-space-8: 64px;
/* ---- TYPE ------------------------------------------------------- */
--cdx-font: 'Space Grotesk', 'Jost', 'Century Gothic', system-ui, sans-serif;
--cdx-line-tight: 1.08; /* @kind other */
--cdx-line-snug: 1.2; /* @kind other */
--cdx-line-body: 1.6; /* @kind other */
--cdx-track-wide: 0.24em; /* wordmark / eyebrow tracking */
--cdx-track-mid: 0.14em; /* label tracking */
/* ---- DATA VISUALISATION ---------------------------------------- */
/* Series order on the dark indigo ground — AMBER is the hero (the one
value that matters); every supporting series is a muted cool slate,
the same white→slate family as the faceted-glass edges. Restraint by
design: the chart should never look like a rainbow dashboard. */
--cdx-series-1: #E0922E; /* amber — the catalyst / hero series */
--cdx-series-2: #C2D4E8; /* cool white — first supporting series */
--cdx-series-3: #93A9CC; /* slate-blue — second supporting */
--cdx-series-4: #6A7EA4; /* deep slate — third supporting */
--cdx-series-5: #47587A; /* deepest slate — the muted rest */
/* Semantic deltas — kept OUTSIDE the series scale so trend arrows read
instantly without reintroducing colour into the series themselves. */
--cdx-pos: #43D98A; /* positive / growth — matches the live status dot */
--cdx-neg: #E0635A; /* negative / signal — a softened ember */
--cdx-grid: rgba(255,255,255,0.07); /* chart gridlines */
--cdx-axis: rgba(255,255,255,0.20); /* baseline / axis stroke */
--cdx-track: rgba(255,255,255,0.08); /* bar / ring track fill */
--cdx-area-top: rgba(224,146,46,0.30); /* area gradient top stop */
--cdx-area-bot: rgba(224,146,46,0.00); /* area gradient bottom */
}
/* ============================================================
LIGHT / INVERTED SURFACE — an OPTIONAL scope for embedding Codex
UI in light documents, print, or bright contexts. Add class
"cdx-light" to a container (or ) to remap the core tokens
to a cool, indigo-inked light surface. Amber stays the accent;
elevation softens from glow to shadow.
NOTE: the FacetedGlyph motif is built from WHITE edges/nodes and
is intended to stay on the DARK ground — render glyphs in a dark
panel even within a light layout.
============================================================ */
.cdx-light {
--cdx-ground: #eceef6;
--cdx-ground-core: #ffffff;
--cdx-ground-mid: #e7e9f3;
--cdx-surface: #ffffff;
--cdx-surface-deep: #f4f5fa;
--cdx-ground-grad: radial-gradient(1300px 900px at 50% 30%, #ffffff 0%, #eceef6 60%, #e4e7f2 100%); /* @kind other */
--cdx-text: #14173a;
--cdx-text-muted: rgba(20,23,58,0.70);
--cdx-text-soft: rgba(20,23,58,0.56);
--cdx-text-faint: rgba(20,23,58,0.46);
--cdx-line: rgba(20,23,58,0.12);
--cdx-line-strong: rgba(20,23,58,0.20);
/* elevation = soft shadow, not glow */
--cdx-elev-1: 0 1px 2px rgba(20,23,58,0.06), 0 6px 20px rgba(20,23,58,0.07);
--cdx-elev-2: 0 2px 4px rgba(20,23,58,0.08), 0 16px 40px rgba(20,23,58,0.12);
/* warm accent holds; tint fills lift slightly for the light ground */
--cdx-amber-soft: rgba(212,134,40,0.16);
--cdx-ember-soft: rgba(181,33,39,0.12);
/* data-viz on light: keep amber hero, darken the supporting ramp */
--cdx-series-2: #5577A8;
--cdx-series-3: #7A8BB0;
--cdx-series-4: #9AA6C0;
--cdx-series-5: #B7BFD2;
--cdx-grid: rgba(20,23,58,0.08);
--cdx-axis: rgba(20,23,58,0.22);
--cdx-track: rgba(20,23,58,0.07);
}
/* ============================================================
SEMANTIC TYPE — one geometric voice, minimal and cool
============================================================ */
.cdx-wordmark {
font-family: var(--cdx-font);
font-weight: 500;
letter-spacing: var(--cdx-track-wide);
text-transform: uppercase;
color: var(--cdx-text);
line-height: var(--cdx-line-tight);
}
/* LOGOTYPE — the "CODEX" wordmark, set in Jost (geometric, all-caps).
Distinct from the UI .cdx-wordmark (Space Grotesk). */
.cdx-logo-wordmark {
font-family: var(--cdx-logo-font);
font-weight: 500;
letter-spacing: var(--cdx-logo-spacing);
text-transform: uppercase;
line-height: 1;
color: var(--cdx-amber);
}
/* THE MARK — C-ring + ×. Ring uses currentColor; × reads --mk-x.
Drop in via . */
.cdx-mark { display: block; color: var(--cdx-brand-indigo); }
.cdx-mark .mk-x { fill: var(--mk-x, var(--cdx-amber)); }
.cdx-mark.reversed { color: #fff; }
.cdx-eyebrow {
font-family: var(--cdx-font);
font-weight: 500;
font-size: 13px;
letter-spacing: var(--cdx-track-wide);
text-transform: uppercase;
color: var(--cdx-amber);
}
/* DISPLAY — the big structural heading */
.cdx-display {
font-family: var(--cdx-font);
font-weight: 400;
font-size: 44px;
line-height: var(--cdx-line-tight);
letter-spacing: -0.02em;
color: var(--cdx-text);
}
.cdx-h1 {
font-family: var(--cdx-font);
font-weight: 500;
font-size: 34px;
line-height: var(--cdx-line-tight);
letter-spacing: -0.02em;
color: var(--cdx-text);
}
.cdx-h2 {
font-family: var(--cdx-font);
font-weight: 500;
font-size: 24px;
line-height: var(--cdx-line-snug);
letter-spacing: -0.01em;
color: var(--cdx-text);
}
.cdx-label {
font-family: var(--cdx-font);
font-weight: 500;
font-size: 12px;
letter-spacing: var(--cdx-track-mid);
text-transform: uppercase;
color: var(--cdx-text-soft);
}
.cdx-lead {
font-family: var(--cdx-font);
font-weight: 400;
font-size: 18px;
line-height: var(--cdx-line-body);
color: var(--cdx-text-muted);
}
.cdx-body {
font-family: var(--cdx-font);
font-weight: 400;
font-size: 15px;
line-height: var(--cdx-line-body);
color: var(--cdx-text-muted);
}
.cdx-caption {
font-family: var(--cdx-font);
font-weight: 400;
font-size: 12px;
line-height: 1.45;
color: var(--cdx-text-faint);
}
/* Statistic / figure — geometric, tabular */
.cdx-figure {
font-family: var(--cdx-font);
font-weight: 300;
font-size: 44px;
line-height: 1;
letter-spacing: -0.02em;
color: var(--cdx-text);
font-variant-numeric: tabular-nums;
}
/* ============================================================
THE DARK STAGE — full-bleed engineered ground
============================================================ */
.cdx-stage {
background: var(--cdx-ground);
background-image: var(--cdx-ground-grad);
color: var(--cdx-text);
font-family: var(--cdx-font);
}
/* A raised dark panel/card on the stage */
.cdx-panel {
background: var(--cdx-surface);
border: 1px solid var(--cdx-line);
border-radius: var(--cdx-radius);
box-shadow: var(--cdx-elev-1);
}
/* ============================================================
FACETED-GLASS SVG CLASSES
These style the output. Edge widths and node
glow read from the --cdx-edge-w / --cdx-glow / --cdx-node
custom properties, which the component sets per instance.
============================================================ */
.cdx-glyph { display: block; overflow: visible; }
.cdx-glyph .face { fill: var(--cdx-face); }
.cdx-glyph .edge { stroke: var(--cdx-edge); stroke-width: var(--cdx-edge-w); fill: none; stroke-linejoin: round; }
.cdx-glyph .edge.bright { stroke: var(--cdx-edge-bright); }
.cdx-glyph .edge-b { stroke: var(--cdx-edge-faint); stroke-width: calc(var(--cdx-edge-w) * 0.66); fill: none; stroke-linejoin: round; }
.cdx-glyph .node { fill: var(--cdx-node); filter: drop-shadow(0 0 var(--cdx-glow) var(--cdx-node-glow)); }
.cdx-glyph .node-w { fill: var(--cdx-node); opacity: 0.4; }
/* ============================================================
COVER / SECTION-BREAK COMPOSITIONS
Three temperatures of the same engineered cover:
.cool — monochrome indigo, motif as hero
.warm — red+amber glow, amber nodes, ember rule (on-brand)
.photo — documentary photo leads, motif as quiet watermark
============================================================ */
.cdx-cover {
position: relative;
width: 100%;
aspect-ratio: 16 / 9;
border-radius: var(--cdx-radius);
overflow: hidden;
border: 1px solid var(--cdx-line-strong);
}
.cdx-cover .wm {
position: absolute; top: 18px; left: 20px; z-index: 3;
font-family: var(--cdx-font); font-weight: 500;
letter-spacing: var(--cdx-track-wide); font-size: 12px; text-transform: uppercase;
}
.cdx-cover .ttl {
position: absolute; left: 20px; bottom: 20px; right: 30%; z-index: 3;
font-family: var(--cdx-font); font-weight: 500; font-size: 21px; line-height: 1.12;
letter-spacing: -0.01em; color: var(--cdx-text);
}
.cdx-cover .glyph-slot {
position: absolute; right: -26px; bottom: -30px; z-index: 2;
width: 188px; height: 188px;
}
.cdx-cover .rule {
position: absolute; left: 20px; bottom: 74px; width: 40px; height: 3px; z-index: 3;
background: var(--cdx-ember);
}
/* cool / monochrome */
.cdx-cover.cool { background: radial-gradient(420px 300px at 74% 26%, var(--cdx-ground-core), var(--cdx-ground-mid) 72%); }
.cdx-cover.cool .wm { color: var(--cdx-text); }
/* warm / branded */
.cdx-cover.warm {
background:
radial-gradient(440px 320px at 80% 16%, rgba(181,33,39,0.55) 0%, rgba(181,33,39,0) 60%),
radial-gradient(360px 300px at 18% 110%, rgba(212,134,40,0.34) 0%, rgba(212,134,40,0) 62%),
linear-gradient(155deg, #1c245e, var(--cdx-ground-mid));
}
.cdx-cover.warm .wm { color: var(--cdx-amber); }
/* photo-anchored */
.cdx-cover.photo .ph {
position: absolute; inset: 0; z-index: 1;
background: repeating-linear-gradient(135deg, #34281a 0 14px, #2c2116 14px 28px);
}
.cdx-cover.photo .phlabel {
position: absolute; inset: 0; z-index: 1; display: flex; align-items: center; justify-content: center;
text-align: center; padding: 0 30px;
font-family: var(--cdx-font); font-size: 12px; color: rgba(255,255,255,0.55); letter-spacing: 0.04em;
}
.cdx-cover.photo .scrim {
position: absolute; inset: 0; z-index: 2;
background: linear-gradient(to top, rgba(7,9,20,0.92) 0%, rgba(7,9,20,0.36) 42%, rgba(7,9,20,0.05) 70%);
}
.cdx-cover.photo .wm { color: var(--cdx-text); }
.cdx-cover.photo .glyph-slot { width: 116px; height: 116px; right: 14px; bottom: 10px; opacity: 0.55; }
.cdx-badge {
position: absolute; top: 14px; right: 14px; z-index: 4;
background: var(--cdx-ember); color: #fff;
font-family: var(--cdx-font); font-weight: 500; font-size: 9.5px;
letter-spacing: 0.1em; text-transform: uppercase; padding: 5px 9px; border-radius: 2px;
}
/* ============================================================
COVER LAYOUTS — composition modifiers (stack with cool/warm/photo)
The temperature classes (.cool/.warm/.photo) set the GROUND;
these set the COMPOSITION. Mix one of each.
============================================================ */
/* Centred — glyph behind a centred wordmark + title, for a title card */
.cdx-cover.center { display: grid; place-items: center; text-align: center; }
.cdx-cover.center .glyph-slot {
position: absolute; inset: 0; right: auto; bottom: auto; left: 50%; top: 46%;
width: 300px; height: 300px; transform: translate(-50%, -50%); opacity: 0.5; z-index: 1;
}
.cdx-cover.center .wm { position: static; margin-bottom: 10px; }
.cdx-cover.center .ttl { position: static; right: auto; max-width: 78%; z-index: 3; }
.cdx-cover.center .rule { position: static; margin: 14px auto 0; }
/* Split — copy column left, large glyph bleeding off the right edge */
.cdx-cover.split .glyph-slot { width: 300px; height: 300px; right: -64px; bottom: 50%; transform: translateY(50%); }
/* Minimal — title only, motif demoted to a small top-right mark */
.cdx-cover.minimal .glyph-slot { width: 84px; height: 84px; right: 18px; top: 18px; bottom: auto; opacity: 0.7; }
/* ============================================================
BUTTONS
Amber is the primary action; ember for "live"/destructive accents;
ghost + quiet for secondary. Calm ease-out, ~1px press nudge.
============================================================ */
.cdx-btn {
display: inline-flex; align-items: center; justify-content: center; gap: 8px;
font-family: var(--cdx-font); font-weight: 500; font-size: 13.5px;
letter-spacing: 0.01em; line-height: 1;
padding: 10px 16px; border-radius: var(--cdx-radius-sm); white-space: nowrap;
background: transparent; color: var(--cdx-text);
border: 1px solid var(--cdx-line-strong); cursor: pointer; text-decoration: none;
transition: background var(--cdx-dur) var(--cdx-ease), border-color var(--cdx-dur) var(--cdx-ease),
color var(--cdx-dur) var(--cdx-ease), transform var(--cdx-dur) var(--cdx-ease),
box-shadow var(--cdx-dur) var(--cdx-ease);
}
.cdx-btn:focus-visible { outline: none; box-shadow: var(--cdx-focus); }
.cdx-btn:active { transform: translateY(1px); }
.cdx-btn svg, .cdx-btn [data-lucide] { width: 16px; height: 16px; }
/* Global Lucide icon weight — thin, to match the hairline glyph edges.
Overrides Lucide's default stroke-width: 2 attribute via CSS. */
.lucide, svg[data-lucide], [data-lucide] svg { stroke-width: var(--cdx-icon-stroke); }
/* PRIMARY — outline + glow. The default action speaks the edge/node
language: a thin amber border, a faint amber tint, and a luminous
hover. Reserve the solid fill for .cdx-btn--emphasis (the rare CTA). */
.cdx-btn--primary { background: rgba(212,134,40,0.10); color: var(--cdx-amber); border-color: rgba(212,134,40,0.55); }
.cdx-btn--primary:hover { background: rgba(212,134,40,0.16); border-color: var(--cdx-amber); box-shadow: 0 0 0 1px rgba(212,134,40,0.22), 0 0 16px rgba(212,134,40,0.35); }
.cdx-btn--primary:focus-visible { box-shadow: var(--cdx-focus); }
/* EMPHASIS — the one solid amber CTA that must dominate. Use sparingly. */
.cdx-btn--emphasis { background: var(--cdx-amber); color: var(--cdx-on-amber); border-color: var(--cdx-amber); box-shadow: 0 0 18px rgba(212,134,40,0.28); }
.cdx-btn--emphasis:hover { background: var(--cdx-amber-deep); border-color: var(--cdx-amber-deep); }
.cdx-btn--ember { background: rgba(181,33,39,0.12); color: #e8888c; border-color: rgba(181,33,39,0.55); }
.cdx-btn--ember:hover { background: rgba(181,33,39,0.18); border-color: var(--cdx-ember); box-shadow: 0 0 0 1px rgba(181,33,39,0.22), 0 0 16px rgba(181,33,39,0.32); }
.cdx-btn--ghost { background: transparent; color: var(--cdx-text); border-color: var(--cdx-line-strong); }
.cdx-btn--ghost:hover { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.28); }
.cdx-btn--quiet { background: transparent; color: var(--cdx-text-muted); border-color: transparent; padding-left: 8px; padding-right: 8px; }
.cdx-btn--quiet:hover { color: var(--cdx-text); }
.cdx-btn--sm { font-size: 12.5px; padding: 8px 13px; }
.cdx-btn--lg { font-size: 15px; padding: 14px 24px; }
.cdx-btn[disabled], .cdx-btn.is-disabled { opacity: 0.4; pointer-events: none; }
/* ============================================================
CARDS — raised dark surface; emphasis cards take an amber top-
or left-rule (never a full coloured border-box).
============================================================ */
.cdx-card {
position: relative; background: var(--cdx-surface);
border: 1px solid var(--cdx-line); border-radius: var(--cdx-radius);
padding: var(--cdx-space-5); box-shadow: var(--cdx-elev-1);
transition: transform var(--cdx-dur) var(--cdx-ease), box-shadow var(--cdx-dur) var(--cdx-ease),
border-color var(--cdx-dur) var(--cdx-ease);
}
.cdx-card--hover:hover { transform: translateY(-3px); box-shadow: var(--cdx-elev-2); border-color: var(--cdx-line-strong); }
.cdx-card--toprule { border-top: 3px solid var(--cdx-amber); border-top-left-radius: var(--cdx-radius); border-top-right-radius: var(--cdx-radius); }
.cdx-card--toprule.ember { border-top-color: var(--cdx-ember); }
.cdx-card--leftrule { border-left: 4px solid var(--cdx-amber); }
.cdx-card--leftrule.ember { border-left-color: var(--cdx-ember); }
/* Frosted variant — over photography / brighter grounds */
.cdx-card--frost {
background: rgba(13,17,48,0.55); backdrop-filter: blur(14px) saturate(1.1);
-webkit-backdrop-filter: blur(14px) saturate(1.1); border-color: var(--cdx-line-strong);
}
.cdx-card__title { font-family: var(--cdx-font); font-weight: 500; font-size: 17px; color: var(--cdx-text); margin: 0; letter-spacing: -0.01em; }
.cdx-card__body { font-family: var(--cdx-font); font-weight: 400; font-size: 14px; line-height: var(--cdx-line-body); color: var(--cdx-text-muted); margin: 8px 0 0; }
/* ============================================================
KPI / STAT BLOCK — geometric figure, label, caption
============================================================ */
.cdx-kpi { display: flex; flex-direction: column; gap: 6px; }
.cdx-kpi .figure { font-family: var(--cdx-font); font-weight: 300; font-size: 46px; line-height: 1; letter-spacing: -0.02em; color: var(--cdx-text); font-variant-numeric: tabular-nums; white-space: nowrap; }
.cdx-kpi .figure .accent { color: var(--cdx-amber); }
.cdx-kpi .k-label { font-family: var(--cdx-font); font-weight: 500; font-size: 12px; letter-spacing: var(--cdx-track-mid); text-transform: uppercase; color: var(--cdx-amber); }
.cdx-kpi .k-caption { font-family: var(--cdx-font); font-size: 12.5px; color: var(--cdx-text-faint); }
/* ============================================================
TAGS / CHIPS / STATUS
============================================================ */
.cdx-tag {
display: inline-flex; align-items: center; gap: 6px;
font-family: var(--cdx-font); font-weight: 500; font-size: 11.5px;
letter-spacing: 0.06em; text-transform: uppercase;
padding: 5px 10px; border-radius: 3px;
background: rgba(255,255,255,0.06); color: var(--cdx-text-muted);
border: 1px solid var(--cdx-line);
}
.cdx-tag--amber { background: var(--cdx-amber-soft); color: var(--cdx-amber); border-color: rgba(212,134,40,0.32); }
.cdx-tag--ember { background: var(--cdx-ember-soft); color: #e8a0a3; border-color: rgba(181,33,39,0.38); }
.cdx-tag--solid { background: var(--cdx-amber); color: var(--cdx-on-amber); border-color: var(--cdx-amber); }
.cdx-status { display: inline-flex; align-items: center; gap: 7px; font-family: var(--cdx-font); font-size: 12.5px; color: var(--cdx-text-muted); }
.cdx-status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--cdx-amber); box-shadow: 0 0 8px var(--cdx-amber-glow); }
.cdx-status.live::before { background: #3ddc84; box-shadow: 0 0 8px rgba(61,220,132,0.9); }
.cdx-status.off::before { background: var(--cdx-text-faint); box-shadow: none; }
/* ============================================================
NAV — sticky top bar on the dark stage
============================================================ */
.cdx-nav {
display: flex; align-items: center; justify-content: space-between;
padding: 18px 32px; border-bottom: 1px solid var(--cdx-line);
background: rgba(7,9,20,0.72); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
.cdx-nav__brand { display: flex; align-items: center; gap: 11px; }
.cdx-nav__brand .cdx-mark { width: 28px; height: 28px; }
.cdx-nav__links { display: flex; align-items: center; gap: 26px; }
.cdx-nav__links a:not(.cdx-btn) {
font-family: var(--cdx-font); font-weight: 500; font-size: 13px;
letter-spacing: var(--cdx-track-mid); text-transform: uppercase;
color: var(--cdx-text-soft); text-decoration: none;
transition: color var(--cdx-dur) var(--cdx-ease);
}
.cdx-nav__links a:not(.cdx-btn):hover, .cdx-nav__links a:not(.cdx-btn)[aria-current="page"] { color: var(--cdx-text); }
.cdx-nav__links a:not(.cdx-btn)[aria-current="page"] { color: var(--cdx-amber); }
/* ============================================================
FORM FIELD — input on the dark ground
============================================================ */
.cdx-field { display: flex; flex-direction: column; gap: 7px; }
.cdx-field > .cdx-label { color: var(--cdx-text-soft); }
.cdx-input {
font-family: var(--cdx-font); font-size: 14px; color: var(--cdx-text);
background: var(--cdx-surface-deep); border: 1px solid var(--cdx-line-strong);
border-radius: var(--cdx-radius-sm); padding: 11px 13px; width: 100%; box-sizing: border-box;
transition: border-color var(--cdx-dur) var(--cdx-ease), box-shadow var(--cdx-dur) var(--cdx-ease);
}
.cdx-input::placeholder { color: var(--cdx-text-faint); }
.cdx-input:focus { outline: none; border-color: var(--cdx-amber); box-shadow: var(--cdx-focus); }
/* ============================================================
DIVIDERS / RULES — the signature thin accent rule
============================================================ */
.cdx-rule { height: 1px; border: 0; background: var(--cdx-line); margin: var(--cdx-space-5) 0; }
.cdx-rule--amber { height: 3px; width: 40px; background: var(--cdx-amber); margin: 0; border-radius: 2px; }
.cdx-rule--ember { height: 3px; width: 40px; background: var(--cdx-ember); margin: 0; border-radius: 2px; }
/* ============================================================
CHARTS — engineered data-viz on the dark ground.
Same language as the FacetedGlyph: thin light strokes, luminous
nodes, amber catalyst lead. The SVG itself is drawn by the chart
helper; these classes carry the shared chrome (frame, axes,
legend, caption) so every chart reads as one family.
============================================================ */
.cdx-chart {
position: relative; background: var(--cdx-surface);
border: 1px solid var(--cdx-line); border-radius: var(--cdx-radius);
padding: var(--cdx-space-5); box-shadow: var(--cdx-elev-1);
}
.cdx-chart__head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 4px; }
.cdx-chart__title { font-family: var(--cdx-font); font-weight: 500; font-size: 16px; letter-spacing: -0.01em; color: var(--cdx-text); margin: 0; }
.cdx-chart__eyebrow { font-family: var(--cdx-font); font-weight: 500; font-size: 11px; letter-spacing: var(--cdx-track-mid); text-transform: uppercase; color: var(--cdx-amber); margin: 0 0 6px; }
.cdx-chart__caption { font-family: var(--cdx-font); font-size: 12px; color: var(--cdx-text-faint); margin: 12px 0 0; }
.cdx-chart svg { display: block; width: 100%; height: auto; overflow: visible; }
/* SVG primitives the helper emits — theme GLOBALLY (class-driven) so a
CodexCharts svg renders correctly in ANY container, not only .cdx-chart. */
.cx-grid { stroke: var(--cdx-grid); stroke-width: 1; }
.cx-axis { stroke: var(--cdx-axis); stroke-width: 1; }
.cx-axis-lbl{ fill: var(--cdx-text-faint); font-family: var(--cdx-font); font-size: 11px; font-variant-numeric: tabular-nums; }
.cx-axis-lbl.y { text-anchor: end; }
.cx-axis-lbl.x { text-anchor: middle; }
.cx-line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.cx-node { stroke: var(--cdx-surface); stroke-width: 1.5; }
.cx-bar { rx: 3; }
.cx-track { fill: var(--cdx-track); }
.cx-val { fill: var(--cdx-text); font-family: var(--cdx-font); font-weight: 500; font-variant-numeric: tabular-nums; }
/* shared legend */
.cdx-legend { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 16px; }
.cdx-legend__item { display: inline-flex; align-items: center; gap: 7px; font-family: var(--cdx-font); font-size: 12.5px; color: var(--cdx-text-muted); }
.cdx-legend__dot { width: 9px; height: 9px; border-radius: 2px; flex: none; }
.cdx-legend__dot.round { border-radius: 50%; }
/* the data-series palette as utility classes (stroke + fill) */
.cdx-s1 { color: var(--cdx-series-1); }
.cdx-s2 { color: var(--cdx-series-2); }
.cdx-s3 { color: var(--cdx-series-3); }
.cdx-s4 { color: var(--cdx-series-4); }
.cdx-s5 { color: var(--cdx-series-5); }
/* ============================================================
TABLES — engineered data rows on the dark ground.
Hairline row rules, tabular numerals, right-aligned numbers,
amber highlight for the row that matters. Sortable headers carry
a caret; a header is .is-sorted (asc/desc) when active.
============================================================ */
.cdx-table-wrap {
border: 1px solid var(--cdx-line); border-radius: var(--cdx-radius);
overflow: hidden; box-shadow: var(--cdx-elev-1); background: var(--cdx-surface);
}
.cdx-table { width: 100%; border-collapse: collapse; font-family: var(--cdx-font); }
.cdx-table thead th {
text-align: left; font-weight: 500; font-size: 11px; letter-spacing: var(--cdx-track-mid);
text-transform: uppercase; color: var(--cdx-text-soft);
padding: 13px 18px; background: var(--cdx-surface-deep);
border-bottom: 1px solid var(--cdx-line-strong); white-space: nowrap;
}
.cdx-table tbody td {
font-size: 14px; color: var(--cdx-text-muted); padding: 14px 18px;
border-top: 1px solid var(--cdx-line); vertical-align: middle;
}
.cdx-table tbody tr:first-child td { border-top: 0; }
.cdx-table tbody td.strong { color: var(--cdx-text); font-weight: 500; }
.cdx-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.cdx-table th.num { text-align: right; }
/* row interactions */
.cdx-table tbody tr { transition: background var(--cdx-dur) var(--cdx-ease); }
.cdx-table--hover tbody tr:hover { background: rgba(255,255,255,0.035); }
.cdx-table tbody tr.is-highlight { background: var(--cdx-amber-soft); }
.cdx-table tbody tr.is-highlight td:first-child { box-shadow: inset 3px 0 0 var(--cdx-amber); }
.cdx-table tbody tr.is-highlight td.strong { color: #fff; }
/* density & zebra modifiers */
.cdx-table--zebra tbody tr:nth-child(even) { background: rgba(255,255,255,0.022); }
.cdx-table--compact thead th { padding: 9px 14px; }
.cdx-table--compact tbody td { padding: 9px 14px; font-size: 13px; }
/* sortable header */
.cdx-th--sort { cursor: pointer; user-select: none; transition: color var(--cdx-dur) var(--cdx-ease); }
.cdx-th--sort:hover { color: var(--cdx-text); }
.cdx-th--sort .caret { display: inline-block; margin-left: 6px; opacity: 0.4; transition: opacity var(--cdx-dur) var(--cdx-ease), transform var(--cdx-dur) var(--cdx-ease); }
.cdx-th--sort.is-sorted { color: var(--cdx-amber); }
.cdx-th--sort.is-sorted .caret { opacity: 1; }
.cdx-th--sort.is-sorted.desc .caret { transform: rotate(180deg); }
/* a delta cell (paired with --cdx-pos / --cdx-neg) */
.cdx-delta { font-variant-numeric: tabular-nums; font-weight: 500; }
.cdx-delta.up { color: var(--cdx-pos); }
.cdx-delta.down { color: var(--cdx-neg); }
/* ============================================================
FORM CONTROLS — the dark-ground input family.
Shared focus ring (amber), recessed surface, hairline border that
warms to amber on focus. Selection controls fill amber when checked.
============================================================ */
/* shared label / hint / row scaffolding (extends .cdx-field) */
.cdx-field .cdx-hint { font-family: var(--cdx-font); font-size: 12px; color: var(--cdx-text-faint); }
.cdx-field--error .cdx-input,
.cdx-field--error .cdx-select select,
.cdx-field--error .cdx-textarea { border-color: var(--cdx-neg); }
.cdx-field--error .cdx-hint { color: var(--cdx-neg); }
/* TEXTAREA — same skin as .cdx-input */
.cdx-textarea {
font-family: var(--cdx-font); font-size: 14px; color: var(--cdx-text); line-height: 1.5;
background: var(--cdx-surface-deep); border: 1px solid var(--cdx-line-strong);
border-radius: var(--cdx-radius-sm); padding: 11px 13px; width: 100%; box-sizing: border-box;
resize: vertical; min-height: 88px;
transition: border-color var(--cdx-dur) var(--cdx-ease), box-shadow var(--cdx-dur) var(--cdx-ease);
}
.cdx-textarea::placeholder { color: var(--cdx-text-faint); }
.cdx-textarea:focus { outline: none; border-color: var(--cdx-amber); box-shadow: var(--cdx-focus); }
/* SELECT — native