/* 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).
*
* Fonts: Epilogue (titles) + Inter (body). Load them:
*
*
* Dark mode (mirrors DO console: light / dark / match-OS, shipped by DO 2026-06-29):
* include theme.js and add
* somewhere (usually the topbar). No attribute = light; [data-theme="dark"] on
* = dark; theme.js resolves "auto" from the OS and persists choice in localStorage. */
: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-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-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; }
/* 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; }
.do-btn { background: var(--do-blue); color: #fff; border: 0; border-radius: var(--do-radius);
padding: 10px 20px; font-size: 15px; font-family: var(--do-font); font-weight: 500;
cursor: pointer; transition: background .15s; }
.do-btn:hover { background: var(--do-blue-dark); }
.do-btn-secondary { background: var(--do-surface); color: var(--do-blue);
border: 1px solid var(--do-border); }
.do-btn-secondary:hover { background: var(--do-blue-tint); }
.do-input { border: 1px solid var(--do-border); border-radius: var(--do-radius);
padding: 10px 12px; font-size: 15px; font-family: var(--do-font); color: var(--do-text);
background: var(--do-surface); outline: none; transition: border-color .15s, box-shadow .15s; }
.do-input:focus { border-color: var(--do-blue); box-shadow: 0 0 0 3px var(--do-blue-tint); }
.do-badge { display: inline-block; border-radius: 20px; padding: 2px 10px; font-size: 12px;
font-weight: 600; }
.do-badge-success { background: rgba(21, 205, 114, .16); color: var(--do-success); }
.do-badge-warning { background: rgba(255, 184, 0, .16); color: var(--do-warning); }
.do-badge-danger { background: rgba(255, 107, 107, .16); color: var(--do-danger); }
.do-badge-info { background: var(--do-blue-tint); color: var(--do-blue); }
.do-table { border-collapse: collapse; width: 100%; font-size: 14px; }
.do-table th { text-align: left; color: var(--do-text-muted); font-weight: 500;
border-bottom: 1px solid var(--do-border); padding: 10px 12px; }
.do-table td { border-bottom: 1px solid var(--do-border); padding: 10px 12px; }
.do-table tr:hover td { background: var(--do-bg); }
.do-kpi { font-family: var(--do-font-title); font-size: 28px; font-weight: 700;
color: var(--do-ink); }
.do-kpi small { display: block; font-family: var(--do-font); font-size: 13px;
font-weight: 400; color: var(--do-text-muted); }
.do-mono { font-family: var(--do-mono); font-size: 13px; }
/* theme toggle — cycles light → dark → auto (like the console's profile-menu setting) */
.do-theme-toggle { margin-left: auto; background: transparent; color: var(--do-text-muted);
border: 1px solid var(--do-border); border-radius: 20px; padding: 5px 14px;
font-size: 13px; font-family: var(--do-font); cursor: pointer;
transition: color .15s, border-color .15s; }
.do-theme-toggle:hover { color: var(--do-blue); border-color: var(--do-blue); }