/* osiris-theme.css — primitives + per-theme semantic tokens. * * Loaded via from viewer.html (served at /theme.css by serve.mjs). * Class on (.dark / .light) is managed by theme.js — see the FOUC * blocker IIFE in viewer.html . * * Back-compat aliases at the bottom let existing viewer.html CSS keep using * --bg, --fg, --accent, etc. — these are removed in a later PR once all * consumers reference the canonical --osiris-* names. */ :root { /* ── Typography (theme-invariant) ────────────────────────────────── */ --osiris-font-sans: "IBM Plex Sans", sans-serif; --osiris-font-mono: "Source Code Pro", monospace; --osiris-fs-xs: 9px; --osiris-fs-sm: 10px; --osiris-fs-md: 11px; --osiris-fs-lg: 12px; --osiris-fs-xl: 13px; --osiris-fs-xxl: 14px; --osiris-lh-tight: 1.2; --osiris-lh-normal: 1.5; --osiris-space-1: 2px; --osiris-space-2: 4px; --osiris-space-3: 6px; --osiris-space-4: 8px; --osiris-space-5: 12px; --osiris-space-6: 16px; --osiris-space-7: 20px; --osiris-space-8: 24px; --osiris-radius-sm: 3px; --osiris-radius-md: 4px; --osiris-radius-lg: 6px; --osiris-radius-pill: 12px; } /* ── DARK (current Osiris look) ─────────────────────────────────────── */ :root.dark { --osiris-surface: #03070c; --osiris-surface-raised: #161b22; --osiris-surface-sunken: #0b1214; --osiris-surface-hover: #21262d; --osiris-text: #366263; --osiris-text-dim: #a2a086; --osiris-text-muted: #5d5b4c; --osiris-border: #0b3737; --osiris-border-soft: #002424; --osiris-accent: #a2a086; --osiris-pass: #166020; --osiris-fail: #f85149; --osiris-warn: #f6b11e; --osiris-pending: #484f58; --osiris-tier-c: #f0883e; /* capable-tier orange */ --osiris-info: #9b3dff; /* purple — cap-vision, plugin cluster */ --osiris-tools: #57a5ff; /* tools-cap orange */ --osiris-cyan: #56d4dd; /* core cluster, gradient stops */ --osiris-scrim: rgba(0, 0, 0, 0.55); --osiris-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.35); --osiris-shadow-md: 0 6px 16px rgba(0, 0, 0, 0.50); --osiris-shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.55); } /* ── LIGHT (outdoor-readable, high contrast) ─────────────────────────── */ :root.light { --osiris-surface: #fffffe; /* off-white — gentler than pure in sun */ --osiris-surface-raised: #fcf9f3; --osiris-surface-sunken: #fafffc; --osiris-surface-hover: #ebf4ef; --osiris-text: #545140; /* 17:1 AAA vs surface */ --osiris-text-dim: #3d4148; /* 9.7:1 AAA */ --osiris-text-muted: #5a6068; /* 5.4:1 AA */ --osiris-border: #fadb61; /* darker for definition vs surface */ --osiris-border-soft: #c0bd9b; --osiris-accent: #0a7d6b; /* deep brand teal — 5.05:1 AA vs surface (the bright #07e4c2 was ~1.6:1 on near-white; darkened for light-theme readability — dark theme keeps its glow). #55 */ --osiris-pass: #166020; /* 4.6:1 AA */ --osiris-fail: #ff2200; /* 5.5:1 AA */ --osiris-warn: #ff5d00; /* 5.3:1 AA */ --osiris-pending: #6e7781; --osiris-tier-c: #b35900; --osiris-info: #3f82cf; --osiris-tools: #b8581e; --osiris-cyan: #29d5db; --osiris-scrim: rgba(255, 255, 255, 0.7); --osiris-shadow-sm: 0 2px 8px rgba(15, 23, 42, 0.08); --osiris-shadow-md: 0 6px 16px rgba(15, 23, 42, 0.12); --osiris-shadow-lg: 0 16px 48px rgba(15, 23, 42, 0.18); } /* ── Auto-derived dim variants (both themes via color-mix) ───────────── */ :root.dark, :root.light { --osiris-accent-dim: color-mix(in srgb, var(--osiris-accent) 20%, transparent); --osiris-pass-dim: color-mix(in srgb, var(--osiris-pass) 20%, transparent); --osiris-fail-dim: color-mix(in srgb, var(--osiris-fail) 20%, transparent); --osiris-warn-dim: color-mix(in srgb, var(--osiris-warn) 20%, transparent); --osiris-pending-dim: color-mix(in srgb, var(--osiris-pending) 20%, transparent); --osiris-tier-c-dim: color-mix(in srgb, var(--osiris-tier-c) 13%, transparent); --osiris-warn-strong: #0fafff; } /* Back-compat aliases removed in PR 5b — all consumers use --osiris-* names. */ /* ── Agent-class viewer: failure-mode badge buckets (Task 7.3) ──────────── */ /* * Five buckets map every result_code to a visible severity colour: * green — PASS * red — model regression (TRACE_FORBIDDEN_CALL) * orange — model miss (TRACE_MISSING_CALL, TRACE_ARGS_MISMATCH, END_STATE_MISMATCH) * yellow — timeout (AGENT_TIMEOUT) * grey — operator / infra (MODEL_NOT_FOUND, VRAM_INSUFFICIENT, AGENT_LAUNCH_ERROR, * MOCK_FATAL, INFRA_ERROR) * * Colour values are chosen to be readable in both .dark and .light themes * as standalone inline elements (no theme-variable dependency). The * hard-coded hex values intentionally avoid the --osiris-* semantic tokens * so the badges render identically in both themes without a second rule-set. */ .badge-result-code { display: inline-block; padding: 2px 6px; border-radius: 3px; font-family: var(--osiris-font-mono, monospace); font-size: 0.85em; font-weight: 500; white-space: nowrap; } .badge-result-code.bucket-green { background: #efe; color: #1a7f37; } /* PASS */ .badge-result-code.bucket-red { background: #fee; color: #c00; } /* model regression */ .badge-result-code.bucket-orange { background: #fef0e6; color: #d2691e; } /* model miss */ .badge-result-code.bucket-yellow { background: #fff8dc; color: #b8860b; } /* timeout */ .badge-result-code.bucket-grey { background: #eee; color: #555; } /* infra / operator */ /* ── Agent-class viewer: summary table + trace-inspector drawer (Task 7.3) ── */ /* Layout-only rules; colour comes from the shared --osiris-* tokens so these * track the active theme. Reuses table.data / .table-wrap / .toolbar / .pill * from viewer.html's inline