/* ============================================================================ blu-omie · v2 · tokens.css Single source of truth for the design system. Components reference these semantic custom properties — NEVER raw hex/oklch inline. Strategy (dark-first dev-tool): - Dark is the default theme (set on + color-scheme). - Every semantic token is defined for dark now; a `:root[data-theme="light"]` block is stubbed so a light swap is a future drop-in, not a rewrite. - Colors authored in OKLCH (perceptually uniform): same L across hues feels matched. Formalizes the ad-hoc v1 oklch() values into named 6-step ramps. - Ladders (space / radius / z) come straight from the designer heuristics pool (#1 spacing, #2 radius, #10 z-index). ========================================================================== */ :root { color-scheme: dark; /* ---- OKLCH hue anchors (the 4 semantic hues used across the app) ------- */ /* green = ok / done, amber = warn / running, red = crit / error, blue = info / brand / links. Violet + cyan are the PJ/PF identity hues. */ --hue-ok: 142; --hue-warn: 80; --hue-crit: 27; --hue-info: 260; --hue-pj: 280; --hue-pf: 220; /* ---- 6-step ramps (L holds perceptually even per step across hues) ----- 50 (faint fill) / 100 / 300 (border) / 500 (base) / 700 (text-on-dark) / 900 We mostly consume: -fill (50 @ alpha), -border (300 @ alpha), -fg (700). */ /* OK / success / green */ --ok-fill: oklch(0.69 0.18 var(--hue-ok) / 0.15); --ok-border: oklch(0.69 0.18 var(--hue-ok) / 0.35); --ok-base: oklch(0.69 0.18 var(--hue-ok)); --ok-fg: oklch(0.82 0.16 var(--hue-ok)); /* AA text on surface */ --ok-strong: oklch(0.69 0.18 var(--hue-ok) / 0.70); /* WARN / pending-active / amber */ --warn-fill: oklch(0.75 0.16 var(--hue-warn) / 0.15); --warn-border: oklch(0.75 0.16 var(--hue-warn) / 0.35); --warn-base: oklch(0.75 0.16 var(--hue-warn)); --warn-fg: oklch(0.86 0.15 var(--hue-warn)); /* CRIT / error / red */ --crit-fill: oklch(0.62 0.22 var(--hue-crit) / 0.15); --crit-border: oklch(0.62 0.22 var(--hue-crit) / 0.40); --crit-base: oklch(0.62 0.22 var(--hue-crit)); --crit-fg: oklch(0.74 0.20 var(--hue-crit)); /* INFO / brand / links / blue */ --info-fill: oklch(0.65 0.18 var(--hue-info) / 0.15); --info-border: oklch(0.65 0.18 var(--hue-info) / 0.35); --info-base: oklch(0.65 0.18 var(--hue-info)); --info-fg: oklch(0.76 0.17 var(--hue-info)); --info-fg-hi: oklch(0.82 0.16 var(--hue-info)); /* link hover */ /* PJ identity (violet) */ --pj-fill: oklch(0.55 0.20 var(--hue-pj) / 0.20); --pj-border: oklch(0.55 0.20 var(--hue-pj) / 0.40); --pj-fg: oklch(0.78 0.15 var(--hue-pj)); --pj-dot: oklch(0.60 0.20 var(--hue-pj)); /* PF identity (cyan-blue) */ --pf-fill: oklch(0.55 0.18 var(--hue-pf) / 0.20); --pf-border: oklch(0.55 0.18 var(--hue-pf) / 0.40); --pf-fg: oklch(0.80 0.12 var(--hue-pf)); --pf-dot: oklch(0.62 0.16 var(--hue-pf)); /* ---- Semantic surface / structure greys (dark) ----------------------- */ /* Elevation in dark = lighter background, not shadow (heuristic #4). */ --bg: oklch(0.16 0.01 265); /* page base ~ #0a0a0c-ish */ --surface: oklch(0.19 0.012 265); /* card ~ #0f1117 */ --surface-hover: oklch(0.22 0.014 265); /* card hover border-zone */ --panel: oklch(0.23 0.014 265); /* raised chip / stat pill ~ #161b27 */ --panel-2: oklch(0.17 0.012 265); /* sunken tab-panel ~ #0c0f19 */ --border: oklch(0.30 0.015 265); /* hairline ~ #252d3d */ --border-soft: oklch(0.26 0.013 265); /* fainter divider */ --border-strong: oklch(0.36 0.018 265); /* hover / focus-adjacent */ /* ---- Text ramp ------------------------------------------------------- */ --text: oklch(0.93 0.012 250); /* primary ~ #e2e8f0 */ --text-subtle: oklch(0.68 0.02 255); /* secondary ~ #8892a4 */ --text-muted: oklch(0.52 0.02 258); /* tertiary / disabled ~ #4a5568 */ /* ---- Spacing ladder (heuristic #1: 4/8/12/16/24/32/48/64/96) --------- */ --space-1: 0.25rem; /* 4 */ --space-2: 0.5rem; /* 8 */ --space-3: 0.75rem; /* 12 */ --space-4: 1rem; /* 16 */ --space-6: 1.5rem; /* 24 */ --space-8: 2rem; /* 32 */ --space-12: 3rem; /* 48 */ --space-16: 4rem; /* 64 */ /* ---- Radius ladder (heuristic #2) ------------------------------------ */ --radius-1: 4px; /* input / badge / chip */ --radius-2: 6px; /* button / card-sm / tab-panel */ --radius-3: 8px; /* card */ --radius-4: 12px; /* card-lg */ --radius-5: 16px; /* modal / dialog */ --radius-pill: 999px; /* ---- Z-index ladder (heuristic #10) ---------------------------------- */ --z-base: 0; --z-sticky: 10; --z-dropdown: 20; --z-popover: 30; --z-modal-backdrop: 40; --z-modal: 50; --z-toast: 60; --z-tooltip: 70; /* ---- Motion (heuristic #3 / #13 / #26 — explicit props, custom bezier) */ --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1); /* entrances */ --ease-standard: cubic-bezier(0.4, 0, 0.2, 1); /* state changes */ --dur-fast: 120ms; --dur-base: 180ms; --dur-slow: 240ms; /* ---- Type ------------------------------------------------------------ */ --font-mono: 'JetBrains Mono', 'Fira Code', ui-monospace, monospace; --fs-2xs: 0.6875rem; /* 11px micro labels */ --fs-xs: 0.75rem; /* 12px body/meta */ --fs-sm: 0.8125rem; /* 13px */ --fs-base: 0.875rem; /* 14px card title */ --fs-lg: 1.0625rem; /* 17px */ --fs-xl: 1.375rem; /* 22px page title (fluid below) */ /* focus ring color — heuristic: :focus-visible 2px ≥3:1 contrast */ --focus-ring: var(--ok-base); } /* Future light theme — stubbed so swap is a drop-in, not a rewrite. Only the surface/text/border greys + focus need re-anchoring; the OKLCH semantic hues already read on light with minor L tweaks (left as TODO). */ :root[data-theme="light"] { color-scheme: light; --bg: oklch(0.99 0.003 250); --surface: oklch(1.00 0 0); --surface-hover: oklch(0.97 0.004 250); --panel: oklch(0.97 0.005 250); --panel-2: oklch(0.98 0.004 250); --border: oklch(0.90 0.006 250); --border-soft: oklch(0.93 0.005 250); --border-strong: oklch(0.82 0.01 250); --text: oklch(0.25 0.02 258); --text-subtle: oklch(0.45 0.02 258); --text-muted: oklch(0.60 0.02 258); /* hue fills need slightly higher alpha on white — TODO when light ships */ } /* ============================================================================ Base + reusable component classes (token-driven, framework-agnostic). Tailwind utilities handle layout; these classes own the *themed* surfaces so a single token edit re-skins every instance. ========================================================================== */ html { color-scheme: dark; } body { background: var(--bg); color: var(--text); font-family: var(--font-mono); } /* Focus — heuristic: :focus-visible only, 2px, offset, ≥3:1 (green on dark) */ :focus { outline: none; } :focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; border-radius: var(--radius-1); } /* ---- status-chip (atom) ---------------------------------------------- */ .chip { font-variant-numeric: tabular-nums; } .chip-ok { background: var(--ok-fill); color: var(--ok-fg); border: 1px solid var(--ok-border); } .chip-warn { background: var(--warn-fill); color: var(--warn-fg); border: 1px solid var(--warn-border); } .chip-crit { background: var(--crit-fill); color: var(--crit-fg); border: 1px solid var(--crit-border); } .chip-info { background: var(--info-fill); color: var(--info-fg); border: 1px solid var(--info-border); } .chip-neutral { background: var(--panel); color: var(--text-subtle); border: 1px solid var(--border); } /* ---- customer-badge (atom) ------------------------------------------- */ .badge-pj { background: var(--pj-fill); color: var(--pj-fg); border: 1px solid var(--pj-border); } .badge-pf { background: var(--pf-fill); color: var(--pf-fg); border: 1px solid var(--pf-border); } /* ---- status-dot (atom) ----------------------------------------------- */ .dot-ok { background: var(--ok-base); } .dot-warn { background: var(--warn-base); } .dot-pend { background: var(--text-muted); } .dot-crit { background: var(--crit-base); } .dot-pj { background: var(--pj-dot); } .dot-pf { background: var(--pf-dot); } /* ---- stepper step states (organism: stepper-tabs) -------------------- */ .step-active { background: var(--ok-fill); border-color: var(--ok-strong); color: var(--ok-fg); } .step-done { background: oklch(0.69 0.18 var(--hue-ok) / 0.08); color: var(--ok-strong); border-color: var(--border-soft); } .step-idle { background: var(--panel); color: var(--text-muted); border-color: var(--border-soft); } /* ---- run-button states (atom: run-button) --------------------------- */ .run-idle { background: var(--info-fill); color: var(--info-fg); border: 1px solid var(--info-border); } .run-running { background: var(--warn-fill); color: var(--warn-fg); border: 1px solid var(--warn-border); } .run-done { background: var(--ok-fill); color: var(--ok-fg); border: 1px solid var(--ok-border); } .run-error { background: var(--crit-fill); color: var(--crit-fg); border: 1px solid var(--crit-border); } /* ---- card (template: order-card) ------------------------------------- */ .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-3); transition: border-color var(--dur-base) var(--ease-standard); } .card:hover { border-color: var(--border-strong); } .card[data-expanded="true"] { border-color: var(--info-border); } .tab-panel { background: var(--panel-2); border: 1px solid var(--border-soft); border-radius: var(--radius-2); } /* ---- ext-link (atom) -------------------------------------------------- */ .link-ext { color: var(--info-fg); text-decoration: none; font-size: var(--fs-xs); transition: color var(--dur-fast) var(--ease-standard); } .link-ext:hover { color: var(--info-fg-hi); text-decoration: underline; } /* ---- skeleton (atom) -------------------------------------------------- */ .skeleton { background: linear-gradient(90deg, var(--panel) 25%, var(--border) 50%, var(--panel) 75%); background-size: 200% 100%; animation: shimmer 1.5s linear infinite; border-radius: var(--radius-1); } @keyframes shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } } /* ---- section-label (atom) -------------------------------------------- */ .section-label { font-size: var(--fs-2xs); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-subtle); } /* ---- pipeline progress mini-bar (collapsed-card affordance, v2 new) --- */ .pipe-seg { background: var(--border-soft); } .pipe-seg-ok { background: var(--ok-base); } .pipe-seg-warn { background: var(--warn-base); } /* ---- numeric ---------------------------------------------------------- */ .tnum { font-variant-numeric: tabular-nums; } /* ---- screenshot lightbox (native , heuristic #11 + #17) ------ */ dialog.lightbox { background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius-5); color: var(--text); max-width: min(960px, 92vw); max-height: 88vh; padding: 0; z-index: var(--z-modal); } dialog.lightbox::backdrop { background: oklch(0 0 0 / 0.62); backdrop-filter: blur(2px); } /* ============================================================================ Reduced motion — opt-out blanket (heuristic / WCAG 2.2). Degrades every transition + the shimmer + Alpine x-transition to near-instant. ========================================================================== */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } .skeleton { animation: none !important; background: var(--panel); } }