/* ───────────────────────────────────────────────────────────────── WEBWORKS Portfolio Dashboard — token + component layer Built on the Sidtech house system (slate neutrals, Modern Plain type: Inter + JetBrains Mono). Status color is allowed to carry meaning here: green = live/shipped, amber = blocked/pending, red = risk/0-progress, blue = wired/info. Theme flips on [data-theme="dark"] set on . ───────────────────────────────────────────────────────────────── */ :root { --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace; /* surfaces */ --canvas: #e9eef3; --surface: #ffffff; --surface-2: #f8fafc; --surface-3: #f1f5f9; --surface-inv: #0f172a; /* text */ --text: #0f172a; --text-2: #334155; --text-3: #64748b; --text-4: #94a3b8; --on-dark: #f8fafc; /* borders */ --border: #e2e8f0; --border-strong: #cbd5e1; /* accent — info-blue family, restrained (links / key numerics / focus) */ --accent: #0369a1; --accent-2: #0284c7; --eyebrow: #0c4a6e; /* status — semantic, theme-aware */ --ok-fg:#047857; --ok-solid:#059669; --ok-bg:#ecfdf5; --ok-border:#a7f3d0; --warn-fg:#b45309;--warn-solid:#d97706;--warn-bg:#fffbeb;--warn-border:#fde68a; --risk-fg:#b91c1c;--risk-solid:#dc2626;--risk-bg:#fef2f2;--risk-border:#fecaca; --info-fg:#0369a1;--info-solid:#0284c7;--info-bg:#f0f9ff;--info-border:#bae6fd; --shadow-sm: 0 1px 2px rgb(15 23 42 / 0.06); --shadow-md: 0 1px 2px rgb(15 23 42 / 0.04), 0 6px 16px -6px rgb(15 23 42 / 0.10); --radius: 12px; --radius-sm: 8px; } [data-theme="dark"] { --canvas: #020617; --surface: #0f172a; --surface-2: #131c30; --surface-3: #1e293b; --surface-inv: #f1f5f9; --text: #f1f5f9; --text-2: #cbd5e1; --text-3: #94a3b8; --text-4: #64748b; --border: #1e293b; --border-strong: #334155; --accent: #38bdf8; --accent-2: #7dd3fc; --eyebrow: #7dd3fc; --ok-fg:#34d399; --ok-solid:#10b981; --ok-bg:rgb(5 150 105 / 0.13); --ok-border:rgb(16 185 129 / 0.30); --warn-fg:#fbbf24;--warn-solid:#f59e0b;--warn-bg:rgb(217 119 6 / 0.13); --warn-border:rgb(245 158 11 / 0.30); --risk-fg:#f87171;--risk-solid:#ef4444;--risk-bg:rgb(220 38 38 / 0.14); --risk-border:rgb(239 68 68 / 0.32); --info-fg:#38bdf8;--info-solid:#0ea5e9;--info-bg:rgb(2 132 199 / 0.14); --info-border:rgb(14 165 233 / 0.30); --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.4); --shadow-md: 0 1px 2px rgb(0 0 0 / 0.3), 0 8px 24px -8px rgb(0 0 0 / 0.6); } /* canvas bg follows the theme (DCViewport sets it inline; override hard) */ .design-canvas { background: var(--canvas) !important; transition: background .25s; } /* status-color intensity tweak — "subdued" mutes the semantic solids */ [data-status="subdued"] { --ok-fg:#4b7d68; --ok-solid:#5b8c79; --warn-fg:#9a7a44; --warn-solid:#b89256; --risk-fg:#a85858; --risk-solid:#bd6d6d; --info-fg:#516f87; --info-solid:#5f88a8; } [data-theme="dark"][data-status="subdued"] { --ok-fg:#7fb3a0; --ok-solid:#5b8c79; --warn-fg:#cdb083; --warn-solid:#b89256; --risk-fg:#d59a9a; --risk-solid:#bd6d6d; --info-fg:#92b3cc; --info-solid:#5f88a8; } /* ── primitives ─────────────────────────────────────────────────── */ .ww { font-family: var(--font-body); color: var(--text-2); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; font-feature-settings: "cv05" 1, "ss01" 1; } .ww *, .ww *::before, .ww *::after { box-sizing: border-box; } .ww-mono { font-family: var(--font-mono); font-feature-settings: "tnum" 1; } .ww-tnum { font-variant-numeric: tabular-nums; } .ww-eyebrow { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--eyebrow); font-family: var(--font-mono); } .ww-h { color: var(--text); font-weight: 700; letter-spacing: -0.01em; } /* card */ .ww-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); } /* status pill */ .ww-pill { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; padding: 3px 9px; border-radius: 999px; white-space: nowrap; border: 1px solid transparent; } .ww-pill .dot { width: 7px; height: 7px; border-radius: 999px; background: currentColor; flex: none; } .ww-pill.ok { color: var(--ok-fg); background: var(--ok-bg); border-color: var(--ok-border); } .ww-pill.warn { color: var(--warn-fg); background: var(--warn-bg); border-color: var(--warn-border); } .ww-pill.risk { color: var(--risk-fg); background: var(--risk-bg); border-color: var(--risk-border); } .ww-pill.info { color: var(--info-fg); background: var(--info-bg); border-color: var(--info-border); } .ww-pill.neutral { color: var(--text-3); background: var(--surface-3); border-color: var(--border); } /* tiny tag (project key) */ .ww-tag { font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: .08em; padding: 2px 7px; border-radius: 5px; background: var(--surface-3); color: var(--text-3); border: 1px solid var(--border); } /* progress track */ .ww-track { height: 6px; border-radius: 999px; background: var(--surface-3); overflow: hidden; } .ww-track > span { display: block; height: 100%; border-radius: 999px; } /* generic chip / code token */ .ww-code { font-family: var(--font-mono); font-size: .85em; background: var(--surface-3); border: 1px solid var(--border); border-radius: 5px; padding: 1px 5px; color: var(--text-2); } a.ww-link { color: var(--accent); text-decoration: none; } a.ww-link:hover { text-decoration: underline; } /* divider */ .ww-rule { height: 1px; background: var(--border); border: 0; } /* recommendation chip */ .ww-rec { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 7px; background: var(--ok-bg); color: var(--ok-fg); border: 1px solid var(--ok-border); }