/* do-theme.css — the DO console aesthetic as a drop-in stylesheet.
* Source of truth for values: tokens.json (keep in sync by hand — no build step).
* Received from Poseidon over A2A 2026-07-19; components below .do-card h2 were
* reconstructed from tokens.json after the A2A message truncated at 8000 chars —
* reconcile with Poseidon's originals when convenient.
*
* Fonts: Epilogue (titles) + Inter (body). Load them:
*
*
* Dark mode (mirrors DO console: light / dark / match-OS):
* include theme.js and add
* in the topbar. No attribute = light; [data-theme="dark"] on = dark; theme.js
* resolves "auto" from the OS and persists the choice in localStorage("do-theme"). */
:root {
--do-blue: #0069FF;
--do-blue-dark: #0353D9;
--do-blue-tint: #E5F0FF;
--do-ink: #031B4E;
--do-text: #333B45;
--do-text-muted: #676E77;
--do-bg: #F5F7FA;
--do-surface: #FFFFFF;
--do-border: #E5E8ED;
--do-success: #15CD72;
--do-warning: #FFB800;
--do-danger: #FF6B6B;
--do-info: #00B4D8;
--do-purple: #7B61FF;
--do-radius: 8px;
--do-shadow: 0 1px 2px rgba(3, 27, 78, .06);
--do-font: Inter, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
--do-font-title: Epilogue, Inter, -apple-system, 'Segoe UI', Roboto, sans-serif;
--do-mono: 'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;
}
[data-theme="dark"] {
--do-blue: #3B8AFF;
--do-blue-dark: #0069FF;
--do-blue-tint: rgba(59, 138, 255, .16);
--do-ink: #F2F6FB;
--do-text: #DCE3EC;
--do-text-muted: #8C99AB;
--do-bg: #0B1523;
--do-surface: #142132;
--do-border: #24344B;
--do-success: #2BDD85;
--do-warning: #FFC533;
--do-danger: #FF7E7E;
--do-info: #2BC5E8;
--do-purple: #9B85FF;
--do-shadow: 0 1px 3px rgba(0, 0, 0, .45);
}
.do-app { font-family: var(--do-font); background: var(--do-bg); color: var(--do-text);
font-size: 15px; line-height: 1.5; margin: 0; min-height: 100vh;
transition: background .2s, color .2s; }
/* top bar — white/navy surface, thin border, brand-left like the console */
.do-topbar { background: var(--do-surface); border-bottom: 1px solid var(--do-border);
padding: 0 24px; height: 56px; display: flex; align-items: center; gap: 16px; }
.do-topbar .do-wordmark { color: var(--do-blue); font-family: var(--do-font-title);
font-weight: 700; font-size: 18px; letter-spacing: -.2px; text-decoration: none; }
.do-topbar .do-crumb { color: var(--do-text-muted); font-size: 14px; }
.do-topbar .do-spacer { flex: 1; }
/* blue hero band — same in both themes (brand surface) */
.do-hero { background: linear-gradient(90deg, #0069FF 0%, #0353D9 100%);
color: #fff; padding: 28px 24px; }
.do-hero h1 { margin: 0; font-family: var(--do-font-title); font-size: 24px; font-weight: 700; }
.do-hero p { margin: 6px 0 0; opacity: .9; }
.do-card { background: var(--do-surface); border: 1px solid var(--do-border);
border-radius: var(--do-radius); box-shadow: var(--do-shadow); padding: 20px;
transition: background .2s, border-color .2s; }
.do-card h2 { margin: 0 0 12px; font-family: var(--do-font-title); font-size: 18px;
color: var(--do-ink); font-weight: 600; }
/* ---- reconstructed from tokens.json below this line ---- */
.do-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px;
border-radius: var(--do-radius); border: 1px solid transparent; font-family: var(--do-font);
font-size: 14px; font-weight: 500; cursor: pointer; text-decoration: none;
background: var(--do-blue); color: #fff; transition: background .15s; }
.do-btn:hover { background: var(--do-blue-dark); }
.do-btn.do-btn-secondary { background: var(--do-surface); color: var(--do-blue);
border-color: var(--do-border); }
.do-btn.do-btn-secondary:hover { background: var(--do-blue-tint); }
.do-btn.do-btn-danger { background: var(--do-danger); }
.do-btn:disabled { opacity: .5; cursor: not-allowed; }
.do-input, .do-select { font-family: var(--do-font); font-size: 14px; color: var(--do-text);
background: var(--do-surface); border: 1px solid var(--do-border);
border-radius: var(--do-radius); padding: 8px 12px; width: 100%; box-sizing: border-box;
transition: border-color .15s; }
.do-input:focus, .do-select:focus { outline: none; border-color: var(--do-blue);
box-shadow: 0 0 0 3px var(--do-blue-tint); }
.do-label { display: block; font-size: 13px; font-weight: 500; color: var(--do-ink);
margin: 12px 0 4px; }
.do-help { font-size: 13px; color: var(--do-text-muted); margin-top: 4px; }
.do-badge { display: inline-block; padding: 2px 10px; border-radius: 20px; font-size: 12px;
font-weight: 500; }
.do-badge-success { background: color-mix(in srgb, var(--do-success) 15%, transparent);
color: var(--do-success); }
.do-badge-warning { background: color-mix(in srgb, var(--do-warning) 18%, transparent);
color: var(--do-warning); }
.do-badge-danger { background: color-mix(in srgb, var(--do-danger) 15%, transparent);
color: var(--do-danger); }
.do-badge-info { background: color-mix(in srgb, var(--do-info) 15%, transparent);
color: var(--do-info); }
.do-badge-muted { background: color-mix(in srgb, var(--do-text-muted) 15%, transparent);
color: var(--do-text-muted); }
.do-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.do-table th { text-align: left; font-size: 12px; font-weight: 500; text-transform: uppercase;
letter-spacing: .4px; color: var(--do-text-muted); padding: 10px 12px;
border-bottom: 1px solid var(--do-border); }
.do-table td { padding: 10px 12px; border-bottom: 1px solid var(--do-border);
color: var(--do-text); }
.do-table tr:last-child td { border-bottom: none; }
.do-table tr:hover td { background: color-mix(in srgb, var(--do-blue) 4%, transparent); }
.do-kpi { display: flex; flex-direction: column; gap: 2px; }
.do-kpi .do-kpi-value { font-family: var(--do-font-title); font-size: 28px; font-weight: 700;
color: var(--do-ink); }
.do-kpi .do-kpi-label { font-size: 13px; color: var(--do-text-muted); }
.do-theme-toggle { background: var(--do-surface); border: 1px solid var(--do-border);
border-radius: 20px; padding: 4px 12px; font-size: 13px; color: var(--do-text);
cursor: pointer; font-family: var(--do-font); }
.do-theme-toggle:hover { border-color: var(--do-blue); }
.do-grid { display: grid; gap: 16px; }
.do-grid.cols-2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.do-grid.cols-3 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.do-main { max-width: 1100px; margin: 0 auto; padding: 24px; display: flex;
flex-direction: column; gap: 16px; }
.do-mono { font-family: var(--do-mono); font-size: 13px; }
a { color: var(--do-blue); }