/* ==========================================================================
baharna — design tokens
--------------------------------------------------------------------------
Single source of truth for the site's visual language, extracted from the
operator-panel mockup. Single-tier: each token holds its value directly.
Usage in Eleventy: import once in your base layout's , before any
other stylesheet, so every template and include can reference var(--token).
To re-skin the whole site, edit values here — nothing else.
========================================================================== */
:root {
/* --- Color -------------------------------------------------------------
A warm-accent palette on a cool blue-slate base. The three brights
(red / teal / gold) are the only saturated colors; everything else is
slate or paper. */
--bg: #15181E; /* page + frame background (the slate) */
--panel: #1E232B; /* surfaces: sidebar, cards, now-block, footer */
--panel2: #272D37; /* raised surface: sidebar item hover */
--ink: #E8E4D6; /* primary text (warm paper) */
--muted: #8B92A0; /* secondary text: dates, notes, captions */
--accent: #E85C4A; /* brand red: titlebar, active nav, dt labels */
--accent2: #3CC2B4; /* teal: links, tags, eyebrows, avatar block */
--gold: #EDBA45; /* highlight: hover states, now-block rule */
--live: #5BD06E; /* status dot ("online") */
--line: #2C323C; /* subtle divider: post rows, hcard border */
--line-bright: #49515F; /* visible border: frame, titlebar, sidebar rule */
--on-bright: #1B0E0A; /* dark ink for text sitting on red/teal/gold fills
(consolidates the three near-blacks the mockup
used on the titlebar — visually identical) */
/* --- Typography --------------------------------------------------------
Three roles: a pixel display face used with restraint, a readable body,
and a mono utility face for all metadata and labels. */
--font-display: "Silkscreen", monospace; /* wordmark, eyebrows */
--font-body: "IBM Plex Sans", system-ui, sans-serif;
--font-mono: "IBM Plex Mono", monospace; /* nav, dates, labels */
/* size scale (px to match the mockup; the few half-pixel sizes in the
mockup snap to the nearest step here — no visible change) */
--fs-h1: 30px;
--fs-h2: 22px;
--fs-lead: 18px; /* hcard name */
--fs-body: 17px; /* default body */
--fs-small: 15px; /* intro + now-block prose */
--fs-label: 14px; /* nav items, spec values */
--fs-label-sm: 13px; /* small mono labels */
--fs-meta: 12px; /* dates, footer, fine print */
--fs-eyebrow: 11px; /* pixel eyebrows, tags, group labels */
--fs-pixel: 8px; /* 88x31 button text */
--fw-regular: 400;
--fw-medium: 600; /* emphasis: titles, active nav */
--fw-bold: 700; /* headings, wordmark */
--lh-tight: 1.2; /* headings */
--lh-snug: 1.5; /* hcard / now prose */
--lh-body: 1.6; /* default */
--ls-mono: 0.5px; /* mono nav + labels */
--ls-pixel: 1px; /* wordmark, eyebrows, group labels */
/* --- Spacing -----------------------------------------------------------
A 4-based scale. The mockup uses a handful of off-scale paddings
(e.g. 22, 26); building the templates snaps them to these steps for a
consistent rhythm — the layout reads the same. */
--space-3xs: 4px;
--space-2xs: 6px;
--space-xs: 8px;
--space-sm: 12px;
--space-md: 16px;
--space-lg: 24px;
--space-xl: 32px;
--space-2xl: 48px;
/* --- Borders & shape ---------------------------------------------------
Hard corners are deliberate — the retro panel look depends on zero
radius, so it's a token, not an oversight. */
--bw: 2px; /* frame, titlebar, sidebar + footer rules, h2 dotted */
--bw-thin: 1px; /* post dividers, 88x31 buttons, tags */
--radius: 0; /* intentional: no rounded corners anywhere */
/* --- Effects -----------------------------------------------------------*/
--shadow-frame: 6px 6px 0 rgba(60, 194, 180, 0.22); /* teal offset ghost */
--grid-line: rgba(232, 236, 240, 0.04); /* graph-paper lines */
--grid-size: 22px;
/* --- Layout ------------------------------------------------------------*/
--maxw: 860px; /* frame max width */
--sidebar-w: 190px; /* left nav column */
--avatar-size: 76px;
--btn88-w: 88px; /* classic web-button dimensions */
--btn88-h: 31px;
/* --- Motion ------------------------------------------------------------
All wrapped in prefers-reduced-motion in the stylesheet. */
--dur-pulse: 1.8s; /* status dot */
--dur-blink: 1.1s; /* cursor */
--dur-fade: 0.25s; /* page transitions */
}