/* * Design tokens — copied verbatim from volametric/DESIGN.md §1. * Dark is frozen (exact legacy hexes); light was rebuilt as a clean dashboard, * not an inverted night mode. Do not invent colours: use a token here or a * semantic data colour from §2 below. * * Theme mechanism: `data-theme="light"` on . (volametric toggles a * `.light` class on each module root because it has many roots on one origin; * this app is a single page, so the attribute is the simpler equivalent.) */ :root { --vm-bg: #000000; --vm-surface: #0d0d0d; --vm-surface-2: #161b22; --vm-inset: #000000; --vm-border: #282828; --vm-border-soft: #1c1c1c; --vm-text: #e6edf3; --vm-text-strong: #ffffff; --vm-text-muted: #8b949e; --vm-accent: #58a6ff; --vm-accent-soft: rgba(88, 166, 255, .13); --vm-accent-strong: #1f6feb; --vm-success: #3fb950; --vm-success-soft: #0a2310; --vm-danger: #f85149; --vm-danger-soft: #2a0a0a; --vm-warning: #d29922; --vm-warning-soft: #2b2410; --vm-gold: #e3b341; --vm-purple: #a78bfa; --vm-purple-soft: #1a0f2e; --vm-orange: #ff7722; --vm-orange-soft: #2a1606; --vm-track: #1c1c1c; --vm-hover: rgba(255, 255, 255, .05); --vm-shadow: 0 0 #0000; } :root[data-theme="light"] { --vm-bg: #eef1f5; --vm-surface: #ffffff; --vm-surface-2: #f4f6f9; --vm-inset: #f0f3f7; --vm-border: #d0d7de; --vm-border-soft: #e6e9ee; --vm-text: #1f2328; --vm-text-strong: #0b0f14; --vm-text-muted: #57606a; --vm-accent: #0969da; --vm-accent-soft: rgba(9, 105, 218, .10); --vm-accent-strong: #0969da; --vm-success: #1a7f37; --vm-success-soft: #dafbe1; --vm-danger: #cf222e; --vm-danger-soft: #ffebe9; --vm-warning: #9a6700; --vm-warning-soft: #fff8e5; --vm-gold: #9a6700; --vm-purple: #8250df; --vm-purple-soft: #f3eefb; --vm-orange: #bc4c00; --vm-orange-soft: #fff1e5; --vm-track: #e6e9ee; --vm-hover: rgba(9, 105, 218, .07); --vm-shadow: 0 1px 3px rgba(31, 35, 40, .08), 0 1px 2px rgba(31, 35, 40, .04); } /* Semantic data colours (DESIGN.md §2) — identical in both themes, canvas-safe. Used for meaning, never for chrome. */ :root { --up: #3fb950; --down: #f85149; --level: #58a6ff; --vol: #f5a623; --stale: #d29922; } /* Typography is switchable — a documented departure from DESIGN.md §3, which fixes one font. Every family below is a system stack: no webfont download, so nothing depends on an external CDN and nothing flashes on first paint. Selection lives on as data-font / data-font-size. */ :root { --ca-font: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; --ca-mono: ui-monospace, SFMono-Regular, Menlo, monospace; --ca-size: 13px; } :root[data-font="system"] { --ca-font: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; } :root[data-font="rounded"] { --ca-font: ui-rounded, "SF Pro Rounded", system-ui, sans-serif; } :root[data-font="serif"] { --ca-font: ui-serif, Georgia, "Times New Roman", serif; } :root[data-font="mono"] { --ca-font: ui-monospace, SFMono-Regular, Menlo, monospace; } :root[data-font="grotesk"] { --ca-font: Inter, "Helvetica Neue", Helvetica, Arial, sans-serif; } :root[data-font-size="xs"] { --ca-size: 11px; } :root[data-font-size="s"] { --ca-size: 12px; } :root[data-font-size="m"] { --ca-size: 13px; } :root[data-font-size="l"] { --ca-size: 15px; } :root[data-font-size="xl"] { --ca-size: 17px; } * { box-sizing: border-box; } /* The root carries the chosen size and every component size is expressed in rem, so one setting scales the whole interface. Setting it on body instead would scale body text alone and leave every heading and caption at browser default. */ html { font-size: var(--ca-size); } body { margin: 0; background: var(--vm-bg); color: var(--vm-text); font-family: var(--ca-font); font-size: 1rem; line-height: 1.45; } code, .num { font-family: var(--ca-mono); } /* Controls do not inherit the page font on their own. */ input, select, textarea, button { font-family: var(--ca-font); } /* ── section header — DESIGN.md §3, the one established style ────────────── */ .chart-title { font-size: 0.8462rem; font-weight: 700; color: var(--vm-text-strong); text-transform: uppercase; letter-spacing: .6px; margin: 0 0 8px; } /* A legend trailing a header is NOT capitalised (§3). */ .chart-title .legend { text-transform: none; letter-spacing: 0; font-weight: 500; color: var(--vm-text-muted); margin-left: 8px; } /* ── card / panel — §5 ───────────────────────────────────────────────────── */ .card { background: var(--vm-surface); border: 1px solid var(--vm-border); border-radius: 7px; padding: 12px; box-shadow: var(--vm-shadow); } /* ── buttons — §5. Filled buttons are ALWAYS #fff text. ──────────────────── */ button, .btn { font: inherit; font-size: 0.9231rem; border-radius: 6px; border: 1px solid var(--vm-border); background: var(--vm-surface-2); color: var(--vm-text); padding: 6px 12px; cursor: pointer; } button:hover, .btn:hover { background: var(--vm-hover); } button:disabled { opacity: .45; cursor: default; } .btn-primary { background: var(--vm-accent-strong); border-color: var(--vm-accent-strong); color: #fff; } .btn-primary:hover { background: var(--vm-accent-strong); filter: brightness(1.1); } .btn-go { background: #238636; border-color: #238636; color: #fff; } .btn-danger { background: var(--vm-danger-soft); border-color: var(--vm-danger); color: var(--vm-danger); } /* ── inputs — token colours, no per-module restyling (§5) ────────────────── */ input, select, textarea { font: inherit; font-size: 0.9231rem; background: var(--vm-inset); color: var(--vm-text); border: 1px solid var(--vm-border); border-radius: 6px; padding: 6px 8px; } :root[data-theme="light"] input, :root[data-theme="light"] select, :root[data-theme="light"] textarea { background: #fff; } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--vm-accent); } label { display: block; font-size: 0.8462rem; color: var(--vm-text-muted); margin-bottom: 4px; } /* ── table — §5 ──────────────────────────────────────────────────────────── */ table { width: 100%; border-collapse: collapse; font-size: 0.9231rem; } th { background: var(--vm-surface-2); color: var(--vm-text-muted); font-weight: 600; font-size: 0.7692rem; text-transform: uppercase; letter-spacing: .5px; text-align: left; padding: 7px 9px; border-bottom: 1px solid var(--vm-border); } td { padding: 8px 9px; border-bottom: 1px solid var(--vm-border-soft); vertical-align: middle; } tr:last-child td { border-bottom: none; } /* ── status badge: soft bg + semantic border + semantic text (§5) ────────── */ .badge { display: inline-block; font-size: 0.7692rem; font-weight: 600; padding: 2px 7px; border-radius: 5px; border: 1px solid; letter-spacing: .3px; } .badge-on { background: var(--vm-success-soft); border-color: var(--up); color: var(--up); } .badge-off { background: var(--vm-surface-2); border-color: var(--vm-border); color: var(--vm-text-muted); } .badge-err { background: var(--vm-danger-soft); border-color: var(--down); color: var(--down); } /* ── category tag: dot + text, never a filled pill (§5) ──────────────────── */ .tag { display: inline-flex; align-items: center; gap: 5px; font-size: 0.8462rem; color: var(--vm-text); } .tag::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--dot, var(--vm-text-muted)); } .up { color: var(--up); } .down { color: var(--down); } .muted { color: var(--vm-text-muted); }