/* Website palette for every live Onyx workspace. Loaded after workspace styles.
   Original colours remain as fallbacks in component CSS, so printed records keep
   their existing light layout. These tokens affect screen presentation only. */
@media screen {
  :root {
    color-scheme: dark;
    --onyx-canvas: #080808;
    --onyx-header: #101010;
    --onyx-surface: #151515;
    --onyx-raised: #202020;
    --onyx-control: #0d0d0d;
    --onyx-row: #191919;
    --onyx-border: #383838;
    --onyx-text: #f5f5f5;
    --onyx-muted: #b5b5b5;
    --onyx-accent: #e31f31;
    --onyx-accent-text: #ff7a86;
    --onyx-focus: #ff7a86;
    --onyx-success: #8bd3a6;
    --onyx-success-bg: #12261b;
    --onyx-success-border: #305b40;
    --onyx-warning: #ebc16d;
    --onyx-warning-bg: #302616;
    --onyx-warning-border: #6c542d;
    --onyx-danger-bg: #32191e;
    --onyx-danger-border: #704049;
    --ozzy-paper: var(--onyx-canvas);
    --ozzy-charcoal: var(--onyx-header);
    --ozzy-ink: var(--onyx-text);
    --ozzy-muted: var(--onyx-muted);
    --ozzy-line: var(--onyx-border);
    --ozzy-soft: var(--onyx-raised);
    --ozzy-green: var(--onyx-success);
    --ozzy-amber: var(--onyx-warning);
    --desk-line: var(--onyx-border);
    --desk-muted: var(--onyx-muted);
    --onyx-card-shadow: none;
  }
  body, .commission-main, .auth-page { background: var(--onyx-canvas); color: var(--onyx-text); }
  .workspace-surface { --desk-line: var(--onyx-border); --desk-muted: var(--onyx-muted); }
  .side, .commission-sidebar, .guest-side { background: #000; }
  .topbar, .commission-header, .mobilebar,
  .department-mobile-nav, .commission-mobile-nav { background: var(--onyx-header); border-color: var(--onyx-border); }
  .workspace-surface .workspace-hero, .guest-main>header, .admin-home>.heading {
    background: var(--onyx-header)!important; border-color: var(--onyx-border)!important;
    border-left-color: var(--onyx-accent)!important;
  }
  .workspace-identity-label, .eyebrow, .experience-kicker, .guest-eyebrow,
  .workspace-surface .workspace-hero :is(.eyebrow,.workspace-identity-label),
  .workspace-hub-head .experience-kicker, .admin-home .eyebrow {
    color: var(--onyx-accent-text)!important;
  }
  .workspace-task-grid>.workspace-task { border-left-color: var(--onyx-warning)!important; }
  .workspace-task-grid>.workspace-task.complete { border-left-color: var(--onyx-success)!important; }
  .workspace-task-grid>.workspace-task.neutral { border-left-color: var(--onyx-muted)!important; }
  .workspace-task-grid>.workspace-task.unavailable { border-left-color: var(--onyx-accent-text)!important; }
  .workspace-task-open, .daily-urgency, .commission-step-number,
  .sales-table a { color: var(--onyx-accent-text); }
  .hub-area.active { background: var(--onyx-raised)!important; }
  .btn, .filter, .session-signout, .lang, .search { background-color: var(--onyx-raised); color: var(--onyx-text); }
  .btn.ghost, .linkbtn { background: transparent; }
  .btn.primary, .workspace-surface .btn.primary, .task.primary,
  .admin-home .home-action.primary, .cash-steps .btn[aria-pressed=true] {
    background: var(--onyx-accent); border-color: var(--onyx-accent); color: #fff;
  }
  .workspace-surface .workspace-hero>.btn, .workspace-surface .workspace-hero>div>.btn,
  .guest-main>header>.btn, .home-action.primary :is(small,.home-action-icon,.home-action-arrow),
  .task.primary p, .btn.primary :is(span,small,strong,svg) { color: #fff; }
  .btn.dark { background: var(--onyx-raised); border-color: #555; color: #fff; }
  .filter.active, .department-tabs .filter.active, .filters [aria-pressed=true],
  .payroll-tabs .active, .payroll-tabs [aria-pressed=true], .payroll-steps .active,
  .commission-content .filters button[aria-pressed=true] {
    background: var(--onyx-danger-bg); border-color: var(--onyx-accent); color: #fff;
  }
  input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]), select, textarea {
    background-color: var(--onyx-control); color: var(--onyx-text); border-color: var(--onyx-border);
  }
  input::placeholder, textarea::placeholder { color: #9c9c9c; opacity: 1; }
  input:disabled, select:disabled, textarea:disabled, input[readonly] { background-color: var(--onyx-raised); color: var(--onyx-muted); }
  input[type=checkbox], input[type=radio], progress { accent-color: var(--onyx-accent); }
  option, optgroup { background: var(--onyx-control); color: var(--onyx-text); }
  input:-webkit-autofill { -webkit-text-fill-color: var(--onyx-text); -webkit-box-shadow: 0 0 0 1000px var(--onyx-control) inset; }
  .field label, .commission-toolbar label, .guest-toolbar span { color: var(--onyx-muted); }
  .auth-card, .onyx-task-nudge, .onyx-quick-menu-items, #profile, dialog { background-color: var(--onyx-surface); color: var(--onyx-text); border-color: var(--onyx-border); }
  dialog::backdrop { background: #000b; }
  .guest-name { color: var(--onyx-text); }
  .bar-table, .table-wrap, .commission-row, .po-paper { background: var(--onyx-surface); }
  th, .bar-table th, .guest-table th { background: var(--onyx-raised); color: var(--onyx-text); }
  .bar-table tbody tr:nth-child(even) { background: var(--onyx-row); }
  .sales-chart text { fill: var(--onyx-muted); }
  .sales-grid { stroke: var(--onyx-border); }
  .sales-dot { fill: var(--onyx-surface); }
  .experience-skeleton i { background: linear-gradient(100deg,#202020 25%,#303030 45%,#202020 65%); }
  .workspace-task-desk progress::-webkit-progress-bar { background: #383838; border-radius: 5px; }
  .workspace-task-desk progress::-webkit-progress-value { background: var(--onyx-accent); border-radius: 5px; }
  .workspace-task-desk progress::-moz-progress-bar { background: var(--onyx-accent); border-radius: 5px; }
  :is(button,a,summary,input,select,textarea):focus-visible {
    outline-color: var(--onyx-focus)!important;
  }
  ::selection { background: #8c1723; color: #fff; }
  @media (hover:hover) and (pointer:fine) {
    .btn.primary:not(:disabled):hover, .workspace-surface .btn.primary:not(:disabled):hover { background: #c51b2b; border-color: #c51b2b; }
    .btn:not(.primary):not(:disabled):hover, .filter:not(:disabled):hover { border-color: #777; }
    .workspace-task-grid>.workspace-task:hover, .hub-area:hover { border-color: #777!important; }
    .workspace-overview>summary:hover { background: var(--onyx-raised); color: var(--onyx-text); }
  }
}