/* ========================================================================== Agent Hub — Keel & Straits DEFAULT theme layer (Phase 3: primitives). Loaded AFTER app.css. app.css is the pixel-exact "classic" look and is deliberately untouched; every rule here is scoped to html:not([data-theme="classic"]) so setting data-theme="classic" on restores the classic skin wholesale. Values come from design/tokens.json via the --ks-* custom properties in design/keel-straits.css — never introduce a colour, radius or shadow that is not in tokens.json. ========================================================================== */ /* --- Global: type, surfaces, the square/flat mandate --------------------- */ html:not([data-theme="classic"]) body { font-family: var(--org-font-body, var(--ks-font-display)); font-size: 15px; line-height: 1.55; color: var(--ks-ink); -webkit-font-smoothing: antialiased; } /* Radius 0 and no shadows everywhere. !important on purpose: this must also defeat the 160+ inline radius/shadow literals until Phase 4 removes them. design-check-ignore: values are the system mandate (BRAND.md interface rules) */ html:not([data-theme="classic"]) body *:not(.mock-scope):not(.mock-scope *), html:not([data-theme="classic"]) body *:not(.mock-scope):not(.mock-scope *)::before, html:not([data-theme="classic"]) body *:not(.mock-scope):not(.mock-scope *)::after { border-radius: 0 !important; box-shadow: none !important; } /* Focus: the only interface use of Signal besides the header rule. */ html:not([data-theme="classic"]) :is(a, button, input, select, textarea, [tabindex]):focus-visible { outline: 2px solid var(--org-accent, var(--ks-signal)); outline-offset: 2px; } /* --- Typography ----------------------------------------------------------- */ html:not([data-theme="classic"]) .page-title { font-size: 34px; font-weight: 700; letter-spacing: -0.04em; color: var(--ks-ink); font-family: var(--org-font-heading, var(--ks-font-display)); } html:not([data-theme="classic"]) .dashboard-greeting { font-size: 34px; font-weight: 700; letter-spacing: -0.04em; color: var(--ks-ink); font-family: var(--org-font-heading, var(--ks-font-display)); } html:not([data-theme="classic"]) :is(.page-subtitle, .dashboard-subtext) { color: var(--ks-graphite); } html:not([data-theme="classic"]) :is(.section-label, .sidebar-section-label, .manage-section-title, .kpi-label, .detail-label, .wizard-step-label) { font-family: var(--ks-font-mono); font-size: 10px; font-weight: 400; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ks-graphite); } html:not([data-theme="classic"]) :is(.modal h2, .modal h3, .wizard-header h2, .confirm-modal h3) { font-size: 24px; font-weight: 700; letter-spacing: -0.03em; color: var(--ks-ink); } html:not([data-theme="classic"]) .back-link { color: var(--ks-ink); text-decoration: underline; } /* --- Buttons. Ink filled / Paper with Ink border. A verb and an object. --- */ html:not([data-theme="classic"]) :is(.btn-primary, .btn-secondary, .btn-danger) { height: var(--ks-control-h); padding: 0 18px; font-family: var(--ks-font-display); font-size: 13px; font-weight: 500; letter-spacing: -0.01em; } html:not([data-theme="classic"]) .btn-primary { background: var(--org-primary, var(--ks-ink)); color: var(--ks-bone); border: 1px solid var(--org-primary, var(--ks-ink)); } html:not([data-theme="classic"]) .btn-primary:hover { background: #252A30; border-color: #252A30; } /* design-check-ignore: hover value from keel-straits.css .ks-btn */ html:not([data-theme="classic"]) .btn-secondary { background: var(--ks-surface); color: var(--ks-ink); border: 1px solid var(--ks-ink); } html:not([data-theme="classic"]) .btn-secondary:hover { background: var(--ks-bone); } html:not([data-theme="classic"]) .btn-danger { background: var(--ks-surface); color: var(--ks-critical); border: 1px solid var(--ks-critical); } html:not([data-theme="classic"]) .btn-danger:hover { background: var(--ks-bone); } html:not([data-theme="classic"]) :is(.btn-primary, .btn-secondary, .btn-danger)[disabled] { background: var(--ks-bone); color: var(--ks-concrete); border-color: var(--ks-line); opacity: 1; cursor: not-allowed; } html:not([data-theme="classic"]) :is(.btn-icon, .btn-icon-danger, .btn-logout) { color: var(--ks-graphite); } html:not([data-theme="classic"]) :is(.btn-icon, .btn-logout):hover { background: var(--ks-line); color: var(--ks-ink); } html:not([data-theme="classic"]) .btn-icon-danger { color: var(--ks-critical); } html:not([data-theme="classic"]) .btn-icon-danger:hover { background: var(--ks-bone); } /* --- Fields. Label above in mono micro caps. ----------------------------- */ html:not([data-theme="classic"]) .form-label { font-family: var(--ks-font-mono); font-size: 10px; font-weight: 400; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ks-graphite); } html:not([data-theme="classic"]) :is(.form-input, .form-select, .search-bar input, .multi-select-search input) { background: var(--ks-surface); border: 1px solid var(--ks-ink); font-family: var(--ks-font-display); font-size: 13px; color: var(--ks-ink); } html:not([data-theme="classic"]) :is(input.form-input, select.form-select, .search-bar input) { height: var(--ks-control-h); padding: 0 12px; } html:not([data-theme="classic"]) textarea.form-input { padding: 9px 12px; line-height: 1.5; } html:not([data-theme="classic"]) :is(.form-input, .form-select, .search-bar input)::placeholder { color: var(--ks-concrete); } html:not([data-theme="classic"]) :is(.form-input, .form-select, .search-bar input):focus { border-color: var(--ks-ink); } html:not([data-theme="classic"]) .form-input.invalid { border-color: var(--ks-critical); } html:not([data-theme="classic"]) .form-error { color: var(--ks-critical); font-size: 12px; } html:not([data-theme="classic"]) .form-hint { color: var(--ks-graphite); font-size: 12px; } /* the select chevron data-URI in app.css hardcodes grey #999 — acceptable until Phase 4; shape is unaffected. */ /* --- Switch --------------------------------------------------------------- */ html:not([data-theme="classic"]) .toggle-track { background: var(--ks-concrete); } html:not([data-theme="classic"]) .toggle-track::after { background: var(--ks-surface); } html:not([data-theme="classic"]) .toggle-switch input:checked + .toggle-track { background: var(--org-primary, var(--ks-ink)); } /* --- Table ---------------------------------------------------------------- */ html:not([data-theme="classic"]) .data-table { border: 1px solid var(--ks-ink); background: var(--ks-surface); } html:not([data-theme="classic"]) .data-table thead { background: var(--org-primary, var(--ks-ink)); } html:not([data-theme="classic"]) .data-table thead th { background: var(--org-primary, var(--ks-ink)); color: var(--ks-bone); font-family: var(--ks-font-mono); font-size: 10px; font-weight: 400; letter-spacing: 0.16em; text-transform: uppercase; padding: 9px 12px; border-bottom: 0; } html:not([data-theme="classic"]) .data-table tbody td { padding: 0 12px; height: var(--ks-row-h); font-size: 13px; color: var(--ks-ink); border-bottom: 1px solid var(--ks-line); } html:not([data-theme="classic"]) .data-table tbody tr:hover { background: var(--ks-bone); } html:not([data-theme="classic"]) .sort-icon { color: var(--ks-concrete); } html:not([data-theme="classic"]) .sort-icon.active { color: var(--ks-bone); } html:not([data-theme="classic"]) .sortable:hover { color: var(--ks-bone); } /* --- Status. A square plus a word — the badge pill dies. ------------------ */ html:not([data-theme="classic"]) :is(.badge, .title-badge) { background: transparent; border: 0; padding: 0; display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 400; color: var(--ks-ink); letter-spacing: 0; text-transform: none; } html:not([data-theme="classic"]) :is(.badge, .title-badge)::before { content: ""; width: 9px; height: 9px; background: var(--ks-concrete); flex-shrink: 0; } html:not([data-theme="classic"]) .badge.success::before { background: var(--ks-good); } html:not([data-theme="classic"]) .badge.error::before { background: var(--ks-critical); } html:not([data-theme="classic"]) .badge.warning::before { background: var(--ks-warning); } html:not([data-theme="classic"]) .badge.info::before { background: var(--ks-ink); } html:not([data-theme="classic"]) .badge.filled { color: var(--ks-ink); background: transparent; } html:not([data-theme="classic"]) :is(.badge.success, .badge.error, .badge.warning, .badge.info) { color: var(--ks-ink); } /* --- Chips (dept/stat pills): quiet mono labels, square ------------------- */ html:not([data-theme="classic"]) :is(.stat-pill, .dept-pill) { background: var(--ks-surface); border: 1px solid var(--ks-line); color: var(--ks-ink); font-family: var(--ks-font-mono); font-size: 11px; } html:not([data-theme="classic"]) .stat-pill-icon { color: var(--ks-graphite); } html:not([data-theme="classic"]) .dept-pill-add { border: 1px dashed var(--ks-concrete); color: var(--ks-graphite); background: transparent; } html:not([data-theme="classic"]) .dept-pill-add:hover { border-color: var(--ks-ink); color: var(--ks-ink); } /* --- Segmented control / tabs --------------------------------------------- */ html:not([data-theme="classic"]) :is(.segmented-control, .tab-group) { background: transparent; border: 1px solid var(--ks-ink); padding: 0; gap: 0; } html:not([data-theme="classic"]) :is(.segmented-btn, .tab-group .tab) { font-family: var(--ks-font-display); font-size: 13px; font-weight: 500; color: var(--ks-graphite); padding: 7px 16px; background: var(--ks-surface); } html:not([data-theme="classic"]) :is(.segmented-btn:hover, .tab-group .tab:hover) { color: var(--ks-ink); } html:not([data-theme="classic"]) :is(.segmented-btn.active, .tab-group .tab.active) { background: var(--org-primary, var(--ks-ink)); color: var(--ks-bone); } html:not([data-theme="classic"]) .wizard-step-tab { color: var(--ks-graphite); } html:not([data-theme="classic"]) .wizard-step-tab.active { color: var(--ks-ink); border-bottom-color: var(--ks-ink); } html:not([data-theme="classic"]) .wizard-step-tab.done { color: var(--ks-good); border-bottom-color: var(--ks-good); } html:not([data-theme="classic"]) .step-num { background: var(--ks-line); color: var(--ks-graphite); font-family: var(--ks-font-mono); } html:not([data-theme="classic"]) .wizard-step-tab.active .step-num { background: var(--ks-ink); color: var(--ks-bone); } html:not([data-theme="classic"]) .wizard-step-tab.done .step-num { background: var(--ks-good); color: var(--ks-bone); } /* --- Cards / stats / detail lists ----------------------------------------- */ html:not([data-theme="classic"]) :is(.card, .kpi-card, .type-card, .agent-card, .radio-row, .prop-card, .selected-user-card, .detail-list, .md-viewer, .status-radio) { background: var(--ks-surface); border: 1px solid var(--ks-line); } html:not([data-theme="classic"]) .kpi-card.selectable:hover { border-color: var(--ks-ink); } html:not([data-theme="classic"]) :is(.kpi-card.selectable.active, .type-card.selected, .radio-row:has(input:checked)) { border-color: var(--ks-ink); background: var(--ks-surface); } html:not([data-theme="classic"]) .kpi-value { font-size: 26px; font-weight: 700; letter-spacing: -0.04em; color: var(--ks-ink); } html:not([data-theme="classic"]) .detail-row { border-bottom: 1px solid var(--ks-line); } html:not([data-theme="classic"]) .detail-value { color: var(--ks-ink); } html:not([data-theme="classic"]) .detail-value.empty { color: var(--ks-concrete); } /* --- Dialogs (modal / wizard / confirm): Paper, Ink border, flat ---------- */ html:not([data-theme="classic"]) :is(.modal, .wizard, .confirm-modal) { background: var(--ks-surface); border: 1px solid var(--ks-ink); } html:not([data-theme="classic"]) :is(.modal-footer, .wizard-footer, .confirm-footer, .wizard-steps) { border-color: var(--ks-line); } html:not([data-theme="classic"]) .modal-error { background: var(--ks-surface); border: 1px solid var(--ks-critical); color: var(--ks-critical); } html:not([data-theme="classic"]) :is(.modal-close, .wizard-close) { color: var(--ks-graphite); } html:not([data-theme="classic"]) .modal-minimise { border: 1px solid var(--ks-line); color: var(--ks-graphite); } html:not([data-theme="classic"]) .modal-minimise:hover { border-color: var(--ks-ink); color: var(--ks-ink); background: var(--ks-surface); } html:not([data-theme="classic"]) .wizard-progress { background: var(--ks-line); } html:not([data-theme="classic"]) .wizard-progress-bar { background: var(--ks-ink); } /* --- Dropdowns / menus ----------------------------------------------------- */ html:not([data-theme="classic"]) :is(.dropdown-menu, .multi-select-dropdown, .autocomplete-dropdown, .pill-add-dropdown) { background: var(--ks-surface); border: 1px solid var(--ks-ink); } html:not([data-theme="classic"]) :is(.dropdown-item, .multi-select-item, .autocomplete-item) { color: var(--ks-ink); font-size: 13px; } html:not([data-theme="classic"]) :is(.dropdown-item:hover, .multi-select-item:hover, .autocomplete-item:hover) { background: var(--ks-bone); } html:not([data-theme="classic"]) .dropdown-item-danger { color: var(--ks-critical); } html:not([data-theme="classic"]) :is(.filter-dropdown, .multi-select-trigger) { background: var(--ks-surface); border: 1px solid var(--ks-ink); color: var(--ks-ink); } html:not([data-theme="classic"]) .multi-select-trigger.has-filter { border-color: var(--ks-ink); color: var(--ks-ink); font-weight: 700; } html:not([data-theme="classic"]) :is(.multi-select-item input[type="checkbox"], .multi-select-all input[type="checkbox"]) { accent-color: var(--ks-ink); } /* --- Pagination ------------------------------------------------------------ */ html:not([data-theme="classic"]) .pagination button { background: var(--ks-surface); border: 1px solid var(--ks-ink); color: var(--ks-ink); font-family: var(--ks-font-display); } html:not([data-theme="classic"]) .pagination button:hover { background: var(--ks-bone); } html:not([data-theme="classic"]) .pagination button.active { background: var(--org-primary, var(--ks-ink)); color: var(--ks-bone); } /* --- Toast: inline-message styling, square dot ----------------------------- */ html:not([data-theme="classic"]) .toast-notification { background: var(--ks-surface); color: var(--ks-ink); border: 1px solid var(--ks-good); font-size: 13px; } html:not([data-theme="classic"]) .toast-notification.error { background: var(--ks-surface); color: var(--ks-ink); border-color: var(--ks-critical); } html:not([data-theme="classic"]) .toast-notification.info { background: var(--ks-surface); color: var(--ks-ink); border-color: var(--ks-ink); } /* --- Loading / empty ------------------------------------------------------- */ html:not([data-theme="classic"]) .global-loading-bar::before { background: linear-gradient(90deg, transparent, var(--ks-ink) 45%, var(--ks-ink) 55%, transparent); } /* Loading indicator: the K&S mark, bars swiping in one by one (SMIL in the background SVG, so the empty spinner divs need no markup change). */ html:not([data-theme="classic"]) :is(.spinner, .view-loading-spinner, .modal-loading-spinner) { border: none; animation: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 72 72'%3E%3Crect x='6' y='11.5' width='0' height='5' fill='%230D1013'%3E%3Canimate attributeName='width' dur='1.6s' repeatCount='indefinite' calcMode='linear' values='0;0;58;58;0' keyTimes='0;0.02;0.15;0.93;1'/%3E%3C/rect%3E%3Crect x='6' y='22.5' width='0' height='5' fill='%230D1013'%3E%3Canimate attributeName='width' dur='1.6s' repeatCount='indefinite' calcMode='linear' values='0;0;32;32;0' keyTimes='0;0.18;0.31;0.93;1'/%3E%3C/rect%3E%3Crect x='0' y='33.5' width='0' height='5' fill='%23EC6100'%3E%3Canimate attributeName='width' dur='1.6s' repeatCount='indefinite' calcMode='linear' values='0;0;72;72;0' keyTimes='0;0.34;0.47;0.93;1'/%3E%3C/rect%3E%3Crect x='6' y='44.5' width='0' height='5' fill='%230D1013'%3E%3Canimate attributeName='width' dur='1.6s' repeatCount='indefinite' calcMode='linear' values='0;0;32;32;0' keyTimes='0;0.5;0.63;0.93;1'/%3E%3C/rect%3E%3Crect x='6' y='55.5' width='0' height='5' fill='%230D1013'%3E%3Canimate attributeName='width' dur='1.6s' repeatCount='indefinite' calcMode='linear' values='0;0;58;58;0' keyTimes='0;0.66;0.79;0.93;1'/%3E%3C/rect%3E%3C/svg%3E") center / contain no-repeat; } html:not([data-theme="classic"]) :is(.view-loading, .loading-state, .empty-state) { color: var(--ks-graphite); } html:not([data-theme="classic"]) .drop-zone { border: 1px dashed var(--ks-concrete); background: var(--ks-surface); color: var(--ks-graphite); } html:not([data-theme="classic"]) .drop-zone:hover { border-color: var(--ks-ink); color: var(--ks-ink); } /* --- Banners / zones -------------------------------------------------------- */ html:not([data-theme="classic"]) :is(.info-banner, .source-banner) { background: var(--ks-surface); border: 1px solid var(--ks-line); color: var(--ks-ink); } html:not([data-theme="classic"]) .danger-zone { background: var(--ks-surface); border: 1px solid var(--ks-critical); } html:not([data-theme="classic"]) .danger-zone-hint { color: var(--ks-graphite); } /* --- Chat (minimal token pass; full pattern is an open design question) ---- */ html:not([data-theme="classic"]) .chat-bubble.user { background: var(--ks-line); color: var(--ks-ink); } html:not([data-theme="classic"]) .chat-bubble.assistant { background: var(--ks-surface); border: 1px solid var(--ks-line); color: var(--ks-ink); } html:not([data-theme="classic"]) .chat-input-bar { border-top: 1px solid var(--ks-line); } html:not([data-theme="classic"]) :is(.chat-ai-notice, .chat-typing) { color: var(--ks-graphite); } html:not([data-theme="classic"]) :is(.refinement-preview, .refinement-progress) { background: var(--ks-surface); border-color: var(--ks-line); } html:not([data-theme="classic"]) .refinement-split { background: var(--ks-line); } html:not([data-theme="classic"]) .refinement-chat { background: var(--ks-surface); } /* --- Shell leftovers -------------------------------------------------------- */ html:not([data-theme="classic"]) .avatar { background: var(--ks-graphite); color: var(--ks-bone); font-family: var(--ks-font-mono); } html:not([data-theme="classic"]) .user-footer { border-top: 1px solid var(--ks-graphite); } html:not([data-theme="classic"]) .user-name { color: var(--ks-bone); } html:not([data-theme="classic"]) .user-role { color: var(--ks-concrete); } html:not([data-theme="classic"]) .btn-logout { color: var(--ks-concrete); } /* --- Org accent on the signature rule (white-label) ----------------------- */ .ks-header__rule { background: var(--org-accent, var(--ks-signal)); } /* --- App pages use the full width — the 1280px .ks-page container is a website convention; a data dashboard needs the room. ---------------------- */ html:not([data-theme="classic"]) .ks-page { max-width: none; padding: var(--ks-5) var(--ks-6); } /* --- Chart chrome (read by ui/charts.js at render time) ------------------- */ html:not([data-theme="classic"]) { --chart-grid: var(--ks-line); --chart-axis: var(--ks-graphite); --chart-crosshair: var(--ks-ink); } /* --- Sidebar nav hover (vendor css defines only the active state) ---------- */ html:not([data-theme="classic"]) .ks-shell__nav a { cursor: pointer; transition: color 0.15s, background 0.15s; } /* Hover bg is the vendor's own active-row value (#1B2026, keel-straits.css .ks-shell__nav a[aria-current]); active additionally carries weight+bone. */ html:not([data-theme="classic"]) .ks-shell__nav a:hover { background: var(--org-sidebar-hover, #1B2026); } html:not([data-theme="classic"]) .theme-card { transition: border-color 0.15s; } html:not([data-theme="classic"]) .theme-card:hover { border-color: var(--ks-ink); } html:not([data-theme="classic"]) .font-picker__button:hover { background: var(--ks-bone); } html:not([data-theme="classic"]) .swatch:hover { outline: 1px solid var(--ks-graphite); outline-offset: 1px; } html:not([data-theme="classic"]) .app-header { background: var(--ks-surface); border-bottom: 1px solid var(--ks-line); } /* --- Sidebar lockup: inverted (bone on ink) in the default theme; the classic layer flips it to ink-on-white. Vars live HERE, not inline, so themes can override them. ------------------------------------------------ */ html:not([data-theme="classic"]) .ks-shell__side .ks-header { --ks-surface: var(--org-sidebar, var(--ks-ink)); --ks-fg: var(--org-sidebar-fg, var(--ks-bone)); } html:not([data-theme="classic"]) .ks-shell__side { background: var(--org-sidebar, var(--ks-ink)); } html:not([data-theme="classic"]) .ks-shell__nav a { color: var(--org-sidebar-muted, var(--ks-concrete)); } html:not([data-theme="classic"]) .ks-shell__nav a:hover, html:not([data-theme="classic"]) .ks-shell__nav a.active, html:not([data-theme="classic"]) .ks-shell__nav a[aria-current] { color: var(--org-sidebar-fg, var(--ks-bone)); } html:not([data-theme="classic"]) .ks-shell__nav a.active, html:not([data-theme="classic"]) .ks-shell__nav a[aria-current] { background: var(--org-sidebar-active, #1B2026); /* design-check-ignore: fallback is the vendor active-row value */ } html:not([data-theme="classic"]) .sidebar-section-label { color: var(--org-sidebar-muted, var(--ks-graphite)); } html:not([data-theme="classic"]) .user-name { color: var(--org-sidebar-fg, var(--ks-bone)); } html:not([data-theme="classic"]) :is(.user-role, .btn-logout) { color: var(--org-sidebar-muted, var(--ks-concrete)); }