/* 8Dweb noc — design tokens (Level 1 decoupling, commit 2026-05-12). * * This file is the single source of truth for every visual primitive: * brand colors, surface colors, status colors, spacing scale, font * sizes, shadows, radii, typography. style.css must reference these * via var(--name) — no raw hex / px / rem inside that file. * * The point: a designer (or future white-label customer) edits ONLY * this file to change the look. Layouts and component shapes live in * style.css; values live here. * * Loaded BEFORE style.css in base.html so style.css's var() refs * resolve at parse time. Cache-busted via the same static_v query * param. * * Per project_design_decoupling_ideas.md, this is L1 of the * decoupling roadmap. L2 (component catalog) and L3 (macro extraction) * are follow-ups. * * To create a per-tenant theme: add a new [data-theme="..."] block * below and switch in base.html. The * variable names stay the same; only the values change. * * Constraints (locked, per project_visual_direction): * - Light enterprise look; NOT dark slate. * - READABILITY OVER AIRY (amended 2026-06-03, feedback_readability_over_airy): * the real (older) users find small/grey/sparse hard to read. Default to * larger type, high-contrast text (no light grey), substantial layout — * NOT minimalist airiness. This supersedes the prior "airy, not dense" rule. * - No Tailwind. * - No CSS build step. Static files served directly. */ :root { /* ─── Brand ────────────────────────────────────────────────────── * 8Dweb logo orange. --brand-soft is the tint used for hover / * subtle backgrounds. --brand-deep is the pressed/accent state. */ --brand: #f7941e; --brand-deep: #e07c0a; --brand-soft: #fef3e6; /* ─── Surfaces (light) ─────────────────────────────────────────── * --bg page background * --bg-elev elevated surfaces (cards, modals) * --bg-soft nested containers, table-row hovers */ --bg: #f8fafc; --bg-elev: #ffffff; --bg-soft: #f1f5f9; /* ─── Borders ──────────────────────────────────────────────────── * --border default 1px divider * --border-soft faint divider, table-row underlines */ --border: #e5e7eb; --border-soft: #f1f5f9; /* ─── Text (light) ─────────────────────────────────────────────── * --text body / headings * --text-2 secondary content * --text-mute metadata, captions * --text-faint timestamps, label hints * * 2026-06-03 readability pass ([[readability-over-airy]]): the old * --text-mute (#64748b ~4.7:1) and --text-faint (#94a3b8 ~2.6:1, FAILS * AA) read as washed-out light grey to the actual (older) users. Darkened * so secondary text is genuinely readable: mute ~7:1, faint ~4.7:1 (AA). * Do NOT lighten these back toward grey. */ --text: #0f172a; --text-2: #2c3a4f; /* ~10:1 */ --text-mute: #475569; /* ~7.0:1 on white — was #64748b */ --text-faint: #64748b; /* ~4.7:1 AA — was #94a3b8 (failed) */ /* ─── Status colors ────────────────────────────────────────────── * Used by check pills, banners, alert rows. The -bg variant is the * tinted background; the bare token is the bold accent (text/border). */ --green: #16a34a; --green-bg: #dcfce7; --yellow: #ca8a04; --yellow-bg: #fef9c3; /* For small dots/bands where the dark amber `--yellow` disappears on * a light card background. Use this for indicators, not text. */ --yellow-strong: #eab308; --red: #dc2626; --red-bg: #fee2e2; --gray: #94a3b8; --gray-bg: #f1f5f9; /* ─── Accent / informational ───────────────────────────────────── * Blue is used for "informational, not-status" callouts (AI panels, * deep-link banners). Cyan is rare — links inside dark contexts. */ --blue: #1d4ed8; --blue-bg: #dbeafe; --blue-soft: #eff6ff; --cyan: #0e7490; --cyan-bg: #ecfeff; /* ─── Extended semantic tokens (UX-5, 2026-05-27) ───────────────── * These names had been referenced throughout style.css and templates * via fallback patterns like `var(--accent, #e87a2e)` even though the * token itself was never defined. Defining them here gives dark mode * + future tenant themes a real seat at the table. * * --accent synonym for --brand; used by .btn-accent, links, etc. * --card-bg synonym for --bg-elev; used by card-y surfaces that * want to follow the elevation rule but were spelling it * "card-bg" in the wild * --orange a warmer warning-intermediate between --yellow and --red. * Used for 4xx-status semantics, "30-60 day expiry" * renewal-window callouts, and customer-side time-warning * badges. Distinct from --brand (#f7941e); --orange is a * tone shift toward red. * --orange-bg light tint of --orange for backgrounds (renewal-window * banners, etc.) * --red-deep a deeper red for "past due / expired" semantics — the * difference between "warning red" (--red) and "this has * already passed" (--red-deep). Used by /system/domains. * --purple "security event" semantic — used in customer activity * feeds for the "sec" event class so the eye separates * security events from generic error events. * --purple-bg light tint companion. */ --accent: var(--brand); --card-bg: var(--bg-elev); --muted: var(--text-mute); /* Alias: templates use both var(--text-mute) and var(--muted) for the same semantic ("secondary captions / metadata"). --muted was never defined — 53 references resolved to nothing, rendering as the browser's default text color. Defining it here closes that silent bug and lets dark mode pick up these spots correctly. */ --orange: #e87a2e; --orange-bg: #fdf0e7; /* "deep" variants: AA-compliant (>=4.5:1) backgrounds for WHITE button text. --orange/--green at full brightness fail WCAG AA with white text; use these on solid call-to-action buttons. Plain --orange/--green are fine for text, borders, and tints. */ --orange-deep: #a8520c; /* 5.42:1 on white */ --green-deep: #15803d; /* 5.02:1 on white */ --red-deep: #b00020; /* 7.33:1 on white */ --yellow-deep: #a16207; /* 4.92:1 white / 4.58:1 on --yellow-bg. AA-safe pill/badge TEXT; plain --yellow stays for dots/tints. */ --purple: #6d28d9; --purple-bg: #f5f3ff; /* ─── Spacing scale (4px base) ─────────────────────────────────── * 1=4 2=8 3=12 4=16 5=20 6=24 8=32 10=40 12=48 16=64 * Use these instead of raw px when you mean "8px of padding because * this is a card". Raw px is still OK for one-off pixel-perfect * alignment, but tokens express intent. */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; /* ─── Type scale ───────────────────────────────────────────────── * Bumped 2026-05-18 to prioritize readability over density. Floor * is 13px — nothing in the NOC goes smaller. Operators include a * 59-year-old principal user; squinting is a tax we shouldn't levy. * * Old scale (deprecated): 11/12/13/14/16/18/22/28/32. Anything that * was at --fs-xs (11px) before is now 13px. Anything that was at * the old --fs-sm (12px) is now 14px. Cascade of +1px each tier. * * Most-used: --fs-base (15) for body, --fs-md (16) for emphasis, * --fs-sm (14) for captions/secondary, --fs-xs (13) for fine print. */ /* 2026-06-03 readability pass: bumped the whole scale up (~+1-3px) — * floor is now 14px, body 17px. The actual users are older and found * the prior scale too small. Do NOT shrink these back toward 11-13px. * Old: 13/14/15/16/18/20/24/30/36, body 16. */ --fs-xs: 14px; --fs-sm: 15px; --fs-base: 16px; --fs-md: 17px; --fs-lg: 20px; --fs-xl: 23px; --fs-2xl: 27px; --fs-3xl: 33px; --fs-4xl: 40px; --lh-tight: 1.3; --lh-base: 1.55; --lh-loose: 1.75; /* Body default — used by base.html on . */ --body-fs: 17px; /* ─── Shadows ──────────────────────────────────────────────────── * Light-mode shadows. Dark mode overrides below. */ --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04); --shadow: 0 1px 3px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04); --shadow-md: 0 4px 6px -1px rgba(15, 23, 42, 0.08), 0 2px 4px -2px rgba(15, 23, 42, 0.04); --shadow-lg: 0 10px 15px -3px rgba(15, 23, 42, 0.08), 0 4px 6px -4px rgba(15, 23, 42, 0.05); /* ─── Layout ───────────────────────────────────────────────────── * --radius default corner radius * --radius-lg cards, modals * --radius-sm pills, badges, small inputs * --hdr-h header height (used by sticky offset calcs) */ --radius: 8px; --radius-lg: 12px; --radius-sm: 4px; --hdr-h: 62px; /* ─── Typography families ──────────────────────────────────────── * Sans loaded from rsms.me/inter; mono uses system fonts. */ --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; /* ─── Transition timings ───────────────────────────────────────── * Use these for hover / state changes so the whole UI feels * consistent. Raw timings = drift. */ --transition-fast: 100ms ease; --transition: 150ms ease; --transition-slow: 250ms ease; /* ─── Responsive breakpoints ───────────────────────────────────── * Canonical breakpoints for the design system. Pages and components * built since 2026-05-18 use these via @media (max-width: ...). * Older @media rules in style.css use ad-hoc values (760/900/1100/ * 720) — those stay in place for backward-compat; new rules use * these tokens. * * CSS custom properties don't work in @media queries directly, so * these are reference values only. Keep components.css @media rules * in sync with these numbers. * * Form factors: * phone = up to 480px (single-col, hamburger nav) * tablet = up to 900px (collapsible sidebar, 2-col grids) * laptop = up to 1280px (full layout, slightly tighter) * desktop = 1280px+ (full layout) * wall = special /wall route (kiosk mode, huge text) */ --bp-phone: 480px; --bp-tablet: 900px; --bp-laptop: 1280px; } /* ─── Dark theme override ───────────────────────────────────────── * Toggled via . Only override the variables * that need to change for dark; everything else inherits from :root. */ [data-theme="dark"] { --bg: #0f172a; --bg-elev: #1e293b; --bg-soft: #111827; --border: #334155; --border-soft: #1f2937; --text: #f1f5f9; --text-2: #cbd5e1; --text-mute: #94a3b8; --text-faint: #64748b; --green-bg: #14532d; --yellow-bg: #713f12; --red-bg: #7f1d1d; --gray-bg: #1e293b; --blue-bg: #1e3a8a; --blue-soft: #1e3a8a; --cyan-bg: #164e63; --brand-soft: #422006; /* Extended semantic tokens — dark-mode overrides. The bare hues (--orange, --red-deep, --purple) stay punchy in dark mode; only the -bg tints get dialed down. --accent and --card-bg inherit via their var() aliases (no override needed). */ --orange-bg: #422006; --purple-bg: #2e1065; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3); --shadow: 0 1px 3px rgba(0, 0, 0, 0.4); --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.5); --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.6); } /* ─── Example: per-tenant white-label theme ─────────────────────── * Demonstrates the override pattern. Coughlin's customer-facing * surface uses a different primary color. Switch per request based on tenant context (planned: tenant_brand * table; see project_design_decoupling_ideas.md "White-labeling * specifically"). * * Adding a new tenant theme = one new [data-theme=""] block. * No Python, no template change beyond the body-class switch. */ [data-theme="coughlin"] { --brand: #1e40af; /* corporate blue */ --brand-deep: #1e3a8a; --brand-soft: #eff6ff; }