:root {
  --dila-raspberry-wine: #b63754;
  --dila-confetti: #e6798e;
  --dila-tarragon: #a4af77;
  --dila-guacamole: #797b3a;
  --dila-guacamole-ink: #66682f;
  --dila-vivacious: #a32857;
  --dila-pink-soft: #f8e7ed;
  --dila-pink-softer: #fff8fa;
  --dila-green-soft: #eff1e4;
  --dila-green-softer: #f8f9f3;
  --dila-ink: #292a24;
  --dila-muted: #70736a;
  --dila-border: #e3e5dc;
}

body { color: var(--dila-ink); background: #faf9f6; }
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible { outline-color: var(--dila-vivacious); }

.brand-logo,
.official-logo { display: block; max-width: 100%; height: auto; object-fit: contain; object-position: left center; }
.sidebar .official-brand { display: block; padding: 0 12px; }
.sidebar .brand-logo { width: 178px; }
.mobile-brand .brand-logo { width: 128px; max-height: 46px; }
.employee-top .official-brand { padding: 0; }
.employee-top .brand-logo { width: 176px; max-height: 54px; }
.simple-header .official-logo { width: 180px; max-height: 62px; }
.error-screen .official-logo { width: 190px; margin-bottom: 30px; }

.sidebar,
.topbar,
.employee-top,
.simple-header { border-color: var(--dila-border); }
.sidebar-label,
.table-meta,
.page-heading p:last-child,
.section-head p,
.activity-row small,
.employee-cell small,
.request-person small { color: var(--dila-muted); }
.nav-item.active { background: var(--dila-pink-soft); color: var(--dila-vivacious); }
.nav-item:hover { background: var(--dila-green-softer); }
.nav-count,
.add-button,
.submit-button { background: var(--dila-vivacious); }
.eyebrow,
.text-link,
.inline-add,
.reset-device { color: var(--dila-vivacious); }
.avatar { background: #e8ebd8; color: #55572a; }
.mode-button:hover { border-color: var(--dila-tarragon); background: var(--dila-green-softer); }

.stat-icon.green,
.activity-icon { background: var(--dila-green-soft); color: var(--dila-guacamole); }
.stat-icon.pink,
.activity-icon.pink { background: var(--dila-pink-soft); color: var(--dila-vivacious); }
.stat-icon.amber,
.activity-icon.warning { background: #f7e5e9; color: var(--dila-raspberry-wine); }
.stat-icon.neutral { background: #eef0e7; color: var(--dila-guacamole); }
.activity-list,
.payroll-list,
.request-list,
.people-list,
.house-item,
.balance-grid > div,
.my-requests,
.setup-list { border-color: var(--dila-border); }
.payroll-header,
.request-header,
.people-header { background: #f0f1e9; color: #686b5f; }
.payroll-row:hover,
.people-row:hover,
.request-row:hover { background: var(--dila-green-softer); }
.mini-avatar,
.avatar-image { background: var(--dila-pink-soft); color: var(--dila-vivacious); }
.positive { color: var(--dila-guacamole-ink) !important; }
.negative { color: var(--dila-raspberry-wine) !important; }
.detail-dot.positive { background: var(--dila-tarragon); }
.detail-dot.negative { background: var(--dila-raspberry-wine); }
.segment.active { color: var(--dila-vivacious); }
.pill.pending { background: #f9e9ed; color: var(--dila-raspberry-wine); }
.pill.approved { background: var(--dila-green-soft); color: #5d602d; }
.pill.denied { background: #f6e1e7; color: var(--dila-raspberry-wine); }
.icon-action.approve { color: #5d602d; background: var(--dila-green-soft); border-color: #dce1c6; }
.icon-action.deny { color: var(--dila-raspberry-wine); background: #fff3f6; border-color: #efd5dd; }
.house-illustration { background: var(--dila-pink-softer); }
.house-item span { color: var(--dila-guacamole-ink); }
.payroll-list,
.people-list { scrollbar-color: var(--dila-vivacious) #eef0e7; }
.payroll-list::-webkit-scrollbar-track,
.people-list::-webkit-scrollbar-track { background: #eef0e7; }
.payroll-list::-webkit-scrollbar-thumb,
.people-list::-webkit-scrollbar-thumb { background: var(--dila-vivacious); border-color: #eef0e7; }

.employee-shell { background: #fbfaf7; }
.current-status,
.status-card.working { border-color: #d9dfbd; background: var(--dila-green-softer); }
.current-status strong,
.status-card.working strong { color: #55572a; }
.pulse,
.status-card.working .status-dot { background: var(--dila-guacamole); }
.pulse { box-shadow: 0 0 0 4px #e5e9d4; }
.employee-action.main-action,
.big-action.primary { background: var(--dila-vivacious); border-color: var(--dila-vivacious); }
.employee-action.exit-action,
.big-action.secondary,
.error-screen button { background: var(--dila-guacamole); border-color: var(--dila-guacamole); }
.big-action.secondary.resume { background: #65672f; }
.request-cta { border-color: #ebcbd6; background: var(--dila-pink-softer); color: var(--dila-vivacious); }
.status-card.personal { border-color: #eccbd6; background: var(--dila-pink-softer); }
.status-card.personal .status-dot { background: var(--dila-vivacious); box-shadow: 0 0 0 5px #f4dbe4; }
.location-note span { color: var(--dila-guacamole); }
.notice,
.toast { background: #494b28; }
.notice span { background: var(--dila-guacamole); }
.spinner { border-color: #efe4e8; border-top-color: var(--dila-vivacious); }
.setup-card .eyebrow { color: var(--dila-vivacious); }
.search-input { border-color: var(--dila-tarragon); }
.search-input:focus { outline-color: #e5e9d5; border-color: var(--dila-guacamole); }
.person-button:active { background: var(--dila-green-softer); }
.person-button b { color: var(--dila-vivacious); }
.error-symbol { background: var(--dila-pink-soft); color: var(--dila-vivacious); }

.incident-row:hover { background: var(--dila-pink-softer); }
.incident-row:focus-visible { outline-color: var(--dila-vivacious); }
.incident-row > svg { color: var(--dila-raspberry-wine); }
.incident-summary { background: #faecef; border-color: #eccbd4; color: var(--dila-raspberry-wine); }
.incident-locations article { background: var(--dila-green-softer); border-color: #dde1cd; }
.incident-locations article.detected { background: var(--dila-pink-softer); border-color: #ead2da; }
.incident-stop-icon { background: var(--dila-green-soft); color: var(--dila-guacamole); }
.incident-stop.flagged .incident-stop-icon { background: #f8e5e9; color: var(--dila-raspberry-wine); }
.incident-stop > b { color: var(--dila-raspberry-wine); background: #f8e5e9; }

@media (max-width: 760px) {
  .mobile-brand .brand-logo { width: 116px; }
  .employee-top .brand-logo { width: 150px; }
}