@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;600;700&family=IBM+Plex+Mono:wght@400;500&family=Public+Sans:wght@400;500;600;700&display=swap');

/* Shared visual tokens from the ABS Trade public portal, inspected 2026-09-13.
   Load after page styles. Keep application layouts and semantic status colours. */
:root {
  --trade-brand: #1b2a49;
  --trade-gold: #c8a14b;
  --trade-gold-hover: #b68f3b;
  --trade-teal: #1f8a8a;
  --trade-body: 'Public Sans', system-ui, sans-serif;
  --trade-heading: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --trade-mono: 'IBM Plex Mono', ui-monospace, monospace;
  --ui-bg: #f4f6f8;
  --ui-surface: #fff;
  --ui-surface-soft: #f4f6f8;
  --ui-text: #15192b;
  --ui-muted: #5a6072;
  --ui-border: #d7dce3;
  --ui-primary: var(--trade-gold);
  --ui-primary-dark: var(--trade-gold-hover);
  --ui-nav: var(--trade-brand);
  --ui-success: #2c8a5b;
  --ui-warning: #7a5a12;
  --ui-danger: #c0392b;
  --ui-radius: 4px;
  --ui-shadow: 0 1px 3px rgb(27 42 73 / 5%);
}

body.site-page, body.workspace-page { font-family: var(--trade-body); color: var(--ui-text); }
.site-page :is(button, input, select, textarea), .workspace-page :is(button, input, select, textarea) { font-family: var(--trade-body); }
.site-page :is(h4, h5, h6), .site-page .card .card-title, .workspace-page :is(h1, h2, h3) {
  font-family: var(--trade-heading); color: var(--trade-brand); font-weight: 700; letter-spacing: .015em; text-transform: uppercase;
}
.site-page h4 { font-size: clamp(32px, 4vw, 48px); line-height: 1.1; }
.site-page h5, .site-page .profile-card-title h5 { font-size: 24px; }
.site-page .card .card-title { font-size: 26px; }
.site-page nav, .site-page nav.blue-grey { background: #fff !important; border-bottom: 1px solid var(--ui-border); }
.site-page nav :is(.brand-logo, .brand-center) { color: var(--trade-brand); }
.site-page nav .brand-logo i { color: var(--trade-gold); }
.site-page nav ul a { color: var(--trade-brand); font-weight: 500; }
.site-page nav ul a:hover, .site-page nav li.active a, .site-page nav a.active { background: #f4f6f8; color: var(--trade-brand); }
.site-page a:not(.btn):not(.btn-small):not(.btn-large):not(.btn-flat) { color: var(--trade-brand); }
.site-page :is(.btn, .btn-small, .btn-large) { color: var(--trade-brand); border-radius: 3px; font-weight: 600; }
.site-page :is(.btn, .btn-small, .btn-large):hover { box-shadow: none; }
.site-page :is(.btn, .btn-small, .btn-large):is(.grey, .blue-grey) { background: var(--trade-brand) !important; color: #fff; }
.site-page :is(.btn, .btn-small, .btn-large).green { background: var(--ui-success) !important; color: #fff; }
.site-page :is(.btn, .btn-small, .btn-large).red { background: var(--ui-danger) !important; color: #fff; }
.site-page :is(.btn, .btn-small, .btn-large):is(.orange, .amber) { background: #fff3d6 !important; color: var(--ui-warning); }
.site-page :is(.btn, .btn-small, .btn-large):disabled,
.site-page :is(.btn, .btn-small, .btn-large).disabled { background: #e4e7ec !important; color: #687080 !important; box-shadow: none; }
.site-page .btn-flat { border-radius: 3px; font-weight: 600; }
.site-page :is(button, a, input, select, textarea):focus-visible { outline: 2px solid var(--trade-teal); outline-offset: 3px; }
.site-page .input-field input:not(.browser-default), .site-page textarea.materialize-textarea,
.site-page .select-wrapper input.select-dropdown, .site-page .tracking-select, .site-page .file-search {
  border-color: var(--ui-border) !important; border-radius: 3px !important;
}
.site-page .input-field input:focus, .site-page textarea.materialize-textarea:focus,
.site-page .select-wrapper input.select-dropdown:focus, .site-page .tracking-select:focus, .site-page .file-search:focus {
  border-color: var(--trade-teal) !important; box-shadow: 0 0 0 2px rgb(31 138 138 / 12%) !important;
}
.site-page table th { text-transform: none; letter-spacing: 0; font-size: 12px; font-weight: 600; color: var(--trade-brand); }
.site-page table td { border-color: var(--ui-border); }
.site-page table tbody tr:hover { background: #eef4f4; }
.site-page :is(.modal, .dropdown-content, .summary-card, .summary-grid, .file-explorer, .workflow-item, .workspace-shortcuts button) { border-radius: 4px; }
.site-page :is(.hero-kicker, .workspace-eyebrow, .summary-label, .current-stage-kicker) { font-family: var(--trade-mono); font-weight: 500; letter-spacing: .055em; }
.site-page .hero-kicker, .site-page .workspace-eyebrow { color: #176969; }
.site-page .workflow-icon, .site-page .readonly-pill { background: #dceff0; color: #176969; }
.site-page .profile-access { background: #dceff0; color: #176969; border-radius: 3px; }
.site-page .profile-tab.active { border-bottom-color: var(--trade-teal); color: #176969; }
.site-page .profile-tab:focus { background: #eef4f4; }
.site-page .current-stage-detail { background: #f0f7f7; border-color: #b9d9d9; border-left: 3px solid var(--trade-teal); border-radius: 4px; }
.site-page .current-stage-kicker { color: #176969; }
.site-page .current-stage-title { color: var(--trade-brand); }
.site-page .timeline-step.current .timeline-marker { background: #dceff0; border-color: var(--trade-teal); color: #176969; box-shadow: 0 0 0 4px rgb(31 138 138 / 10%); }
.site-page .timeline-step.complete .timeline-marker { background: var(--ui-success); border-color: var(--ui-success); }
.site-page .timeline-step.complete::before, .site-page .timeline-step.current::before { background: var(--trade-teal); }
.site-page .workspace-shortcuts button > .material-icons:first-child { background: #dceff0; color: #176969; border-radius: 3px; }
.site-page .workspace-shortcuts button:hover { background: #f0f7f7; border-color: var(--trade-teal); }
.site-page .approval-review, .site-page .quote-review-summary { border-color: #b9d9d9; }
.site-page .approval-review textarea { border-color: #b9d9d9; border-radius: 3px; }
.site-page .file-row.active { background: #dceff0; color: var(--trade-brand); }
.site-page .file-row-icon, .site-page .file-search, .site-page .action-icon-btn { border-radius: 3px; }
.site-page .file-list.is-drag-over::after { border-color: var(--trade-teal); background: #f0f7f7; color: #176969; }
.site-page .history-payload pre { background: var(--trade-brand); font-family: var(--trade-mono); }
.site-page #tryNewProfile span { background: #fff3d6 !important; color: #7a5a12 !important; border-radius: 3px !important; }

/* Login follows the portal's simple, white, left-aligned form treatment. */
body.site-page.auth-page { background: #fff; }
.site-page.auth-page main.container { align-items: start; padding-top: clamp(40px, 7vh, 80px); }
.site-page .auth-card { width: min(100%, 460px); border: 0; box-shadow: none; }
.site-page .auth-card .card-content { padding: 24px; }
.site-page .auth-card .card-content .card-title { font-size: 56px; line-height: 1.1; margin: 12px 0 20px; }
.site-page .estimate-heading-copy > .material-icons, .site-page .quote-confirm-content h5 .material-icons { color: var(--trade-teal); }
.site-page .estimate-result, .site-page .upload-queue { background: #f0f7f7; border-color: #b9d9d9; border-radius: 4px; }
.site-page .estimate-total > span { color: #176969; }
.site-page .upload-zone.drag-over, .site-page .document-row:hover, .site-page .document-row.active { background: #f0f7f7; border-color: var(--trade-teal); color: #176969; }
.site-page .status-approved { background: #ddf1e5; color: #236b47; }
.site-page .row-action:hover, .site-page .message-badge { background: #dceff0; color: #176969; }
.site-page .auth-card .auth-field > label { font-weight: 500; font-size: 13px; color: var(--ui-text) !important; }
.site-page .auth-card button[type=submit] { width: auto; min-width: 100px; margin-top: 12px; }

/* Drawing workspaces retain their geometry and use the same navy/gold chrome. */
body.workspace-page {
  --workspace-nav: var(--trade-brand); --workspace-toolbar: #233858;
  --workspace-primary: var(--trade-gold); --workspace-border: var(--ui-border); --workspace-muted: var(--ui-muted);
}
body.tool-workspace {
  --ink: var(--ui-text); --muted: var(--ui-muted); --line: var(--ui-border); --border: var(--ui-border);
  --bg: var(--ui-bg); --canvas: var(--ui-bg); --blue: var(--trade-brand); --cyan: var(--trade-teal); --accent: var(--trade-teal);
}
.editor-workspace .brand .material-icons { color: var(--trade-gold); }
.editor-workspace .menu-dropdown { background: var(--trade-brand); border-color: #527095; border-radius: 4px; }
.editor-workspace :is(.menu-button, .nav-link, .toolbar-button-icon) { border-radius: 3px; }
.editor-workspace .toolbar-button-icon { background: #294568; border-color: #527095; }
.editor-workspace .toolbar button.active, .editor-workspace .topbar button.active { color: var(--trade-brand); }
.editor-workspace :is(.sidebar input, .sidebar select, .modal-panel, .modal-field input, .modal-field select, .modal-field textarea) { border-radius: 4px; }
.tool-workspace :is(.controls, .library, .card, .board, button, .icon-btn) { border-radius: 4px; box-shadow: none; }
.tool-workspace .primary, .tool-workspace button.primary { color: var(--trade-brand); }
.tool-workspace .primary:hover { background: var(--trade-gold-hover); box-shadow: none; }
.viewer-workspace .overlayActions { background: var(--trade-brand); border-radius: 4px; }
.viewer-workspace .overlayActions :is(button, .editControl, .colorControl) { border-radius: 3px; background: #294568; border-color: #527095; }