/* ===== Reset & design tokens ===== Style direction: technical / engineering-trust — deep navy chrome, a single restrained blue accent for actions, and a monospace accent reserved for drawing-precise data (spec labels, drawing refs, revisions, region/status codes) so the UI reads as a precision drafting tool, not a generic SaaS dashboard. */ :root { --primary-color: #0F172A; --primary-dark: #020617; --primary-light: #e7ecf3; --accent-color: #0369A1; --accent-amber: #b45309; --border-color: #e2e8f0; --background-color: #f8fafc; --card-bg: #ffffff; --surface-sunken: #f1f5f9; --desk-bg: #62676e; --success-color: #15803d; --warning-color: #b45309; --danger-color: #dc2626; --text-color: #0f172a; --text-light: #475569; --shadow: 0 4px 12px rgba(0, 0, 0, 0.08); --shadow-paper: 0 6px 24px rgba(0, 0, 0, 0.35); --border-radius: 8px; --radius-sm: 6px; --header-h: 62px; --duration-fast: 150ms; --duration-normal: 300ms; --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --font-sans: 'Inter', sans-serif; --font-mono: 'JetBrains Mono', monospace; /* Region badges — always paired with a text label, never color-only */ --region-in-bg: #fef3e2; --region-in-fg: #92400e; --region-eu-bg: #e0f2fe; --region-eu-fg: #075985; --region-us-bg: #eef2ff; --region-us-fg: #3730a3; --region-cn-bg: #fde8ef; --region-cn-fg: #9f1239; /* Project status pills */ --status-draft-bg: #f1f5f9; --status-draft-fg: #475569; --status-progress-bg: #fef3e2; --status-progress-fg: #92400e; --status-approved-bg: #dcfce7; --status-approved-fg: #15803d; --status-hold-bg: #fee2e2; --status-hold-fg: #b91c1c; --scrollbar-thumb: #c3c9cf; --scrollbar-thumb-hover: #a8afb6; color-scheme: light; } /* ===== Dark theme ===== js/state/theme.js always stamps an explicit data-theme ("light" or "dark") on — the app does not follow the OS preference, so no prefers-color-scheme fallback is needed here. */ :root[data-theme="dark"] { --primary-color: #3b82f6; --primary-dark: #1d4ed8; --primary-light: #16233b; --accent-color: #38bdf8; --accent-amber: #f59e0b; --border-color: #253044; --background-color: #0b1220; --card-bg: #111827; --surface-sunken: #0f1726; --desk-bg: #1b212b; --success-color: #22c55e; --warning-color: #f59e0b; --danger-color: #f87171; --text-color: #e2e8f0; --text-light: #94a3b8; --shadow: 0 4px 16px rgba(0, 0, 0, 0.45); --shadow-paper: 0 8px 28px rgba(0, 0, 0, 0.6); --region-in-bg: #3a2a12; --region-in-fg: #fbbf6a; --region-eu-bg: #10293b; --region-eu-fg: #7cc6f5; --region-us-bg: #1e2151; --region-us-fg: #b7bdfb; --region-cn-bg: #3a1420; --region-cn-fg: #f79cb4; --status-draft-bg: #1b2333; --status-draft-fg: #94a3b8; --status-progress-bg: #3a2a12; --status-progress-fg: #fbbf6a; --status-approved-bg: #103b22; --status-approved-fg: #4ade80; --status-hold-bg: #3a1414; --status-hold-fg: #fb7185; --scrollbar-thumb: #2c3646; --scrollbar-thumb-hover: #3c4a60; color-scheme: dark; } * { margin: 0; padding: 0; box-sizing: border-box; } html, body { height: 100%; } body { font-family: var(--font-sans); background-color: var(--background-color); color: var(--text-color); line-height: 1.5; font-size: 13px; overflow: hidden; } h1, h2, h3 { font-weight: 600; } .hidden { display: none !important; } /* ===== Buttons ===== */ .btn { font-family: var(--font-sans); font-size: 12.5px; font-weight: 500; border: none; border-radius: var(--radius-sm); padding: 8px 14px; cursor: pointer; display: inline-flex; align-items: center; gap: 7px; transition: all var(--duration-fast) ease; background: var(--primary-color); color: #fff; white-space: nowrap; } .btn:hover { background: var(--primary-dark); } .btn:active { transform: translateY(1px); } .btn:focus-visible { outline: 2px solid var(--primary-color); outline-offset: 2px; } .btn-outline { background: var(--card-bg); color: var(--primary-color); border: 1px solid var(--border-color); } .btn-outline:hover { background: var(--primary-light); border-color: var(--primary-color); } .btn-ghost { background: transparent; color: var(--text-light); } .btn-ghost:hover { background: var(--primary-light); color: var(--primary-color); } .btn-sm { padding: 5px 9px; font-size: 11.5px; } .btn-danger-ghost { background: transparent; color: var(--danger-color); } .btn-danger-ghost:hover { background: #fdecea; } .btn-danger { background: var(--danger-color); color: #fff; } .btn-danger:hover { background: #c0392b; } .btn-danger:disabled { background: var(--danger-color); opacity: 0.4; cursor: not-allowed; } /* ===== Scrollbars ===== */ ::-webkit-scrollbar { width: 9px; height: 9px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 5px; } ::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-thumb-hover); } /* ===== Small tags ===== */ .rep-tag { font-size: 9px; font-weight: 600; text-transform: uppercase; background: #e9ecef; color: var(--text-light); border-radius: 4px; padding: 1px 5px; }