/* ============================================================================= ibm.css — the three.ws × IBM design system Single source of truth for the /ibm showcase surface. Why this file exists: every /ibm page had its own :root with the same IBM Carbon colors spelled eight different ways. That drift is why the pages looked like eight sites. This file consumes the canonical B01 design tokens (from style.css) plus the scoped --brand-blue-* accent theme defined below, and keeps a small set of legacy back-compat aliases so a page only has to link this file and delete its local :root — no var() rewrites. Tune the look here and it changes everywhere. Usage in a page : then remove that page's local `:root { ... }` token block. Palette is IBM Carbon: Blue 60 #0f62fe, Blue 50 #4589ff, Blue 40 #78a9ff, Green 50 #42be65, Red 50 #fa4d56, Yellow 30 #f1c21b. ============================================================================= */ :root { color-scheme: dark; /* IBM Carbon brand accent — theme layer over the canonical monochrome system. Scoped visual identity for /ibm/* surfaces; everything else stays monochrome. */ --brand-blue: #0f62fe; --brand-blue-2: #4589ff; --brand-blue-light: #78a9ff; --brand-blue-dim: rgba(15, 98, 254, 0.12); --brand-blue-glow: rgba(15, 98, 254, 0.22); --brand-blue-stroke: rgba(120, 169, 255, 0.22); /* ---- Back-compat aliases ----------------------------------------------- * Every legacy spelling found across the /ibm pages maps to a canonical * token above. Add a new alias here rather than re-defining a token. * NOTE: --stroke maps to the canonical monochrome stroke, not * --brand-blue-stroke (the IBM blue variant). Use --brand-blue-stroke * explicitly where blue borders are intentional. */ --bg: #070707; --panel: var(--surface-1); --panel-solid: var(--surface-1); --panel-2: var(--surface-2); --panel2: var(--surface-2); --panel-hover: var(--surface-3); --border: var(--stroke); --border2: var(--stroke-strong); --border-hi: var(--stroke-strong); --border-strong: var(--stroke-strong); --line: var(--stroke); --stroke: var(--stroke-strong, rgba(255, 255, 255, 0.14)); /* monochrome — use --brand-blue-stroke for IBM blue borders */ --text: var(--ink); --ink: #e8e8e8; --accent: var(--accent, #ffffff); --accent2: #cccccc; --muted: var(--ink-dim); --muted2: var(--ink-dim); --faint: var(--ink-dim); --green: var(--success); --up: var(--success); --allow: var(--success); --down: var(--danger); --block: var(--danger); --warn: var(--warn); --review: var(--warn); --amber: var(--warn); --radius: var(--radius-card); --radius-sm: var(--radius-control); --radius-md: var(--radius-card); --radius-lg: var(--radius-card); --shadow: 0 20px 56px rgba(0, 0, 0, 0.6), 0 4px 12px rgba(0, 0, 0, 0.3); --font: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --mono: var(--font-mono); /* ---- Canonical card tokens — let .card from style.css work on IBM pages */ --card-bg: var(--surface-1); --card-border: var(--stroke); --card-border-hover: var(--stroke-strong); --card-radius: var(--radius-card); --card-pad: var(--space-lg); --card-shadow: 0 20px 56px rgba(0, 0, 0, 0.6), 0 4px 12px rgba(0, 0, 0, 0.3); --focus-ring-color: var(--brand-blue-light); --focus-ring-width: 2px; --focus-ring-offset: 2px; } /* ============================================================================= Base — safe defaults. Page-level inline