/* Package 17 — Unified Commercial Design System
   Client-facing palette: black / gold / cream / white.
   Loaded after legacy module CSS so every workspace feels like one product. */

:root {
  --ds-black: #111111;
  --ds-black-2: #1b1b1b;
  --ds-gold: #f5b800;
  --ds-gold-strong: #d99d00;
  --ds-gold-dark: #9a6c00;
  --ds-cream: #fffaf0;
  --ds-cream-2: #f7f2e7;
  --ds-white: #ffffff;
  --ds-text: #171717;
  --ds-muted: #6b655d;
  --ds-line: #e4d7b9;
  --ds-line-soft: #eee8da;
  --ds-success: #25743a;
  --ds-warning: #9a6400;
  --ds-danger: #b42318;
  --ds-info: #3a668b;
  --ds-radius-sm: 10px;
  --ds-radius: 14px;
  --ds-radius-lg: 18px;
  --ds-shadow-sm: 0 5px 18px rgba(0,0,0,.05);
  --ds-shadow: 0 12px 32px rgba(0,0,0,.07);
  --ds-shadow-lg: 0 18px 44px rgba(0,0,0,.09);
  --ds-focus: 0 0 0 3px rgba(245,184,0,.26);
  --ds-content: 1260px;
}

html { scroll-behavior: smooth; }
body { font-size: 15.5px; line-height: 1.5; }
body, input, select, textarea, button { font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; }

.skip-link {
  position: fixed;
  left: 12px;
  top: -60px;
  z-index: 9999;
  padding: 10px 14px;
  border-radius: 10px;
  background: var(--ds-gold);
  color: var(--ds-black) !important;
  font-weight: 900;
  text-decoration: none;
}
.skip-link:focus { top: 12px; }

/* Brand shell */
.topbar {
  position: sticky;
  top: 0;
  z-index: 100;
  min-height: 82px !important;
  padding: 10px max(24px, 4vw) !important;
  background: var(--ds-black) !important;
  border-bottom: 4px solid var(--ds-gold) !important;
}
.brand-lockup { gap: 14px !important; }
.brand-logo { width: 60px !important; height: 60px !important; }
.brand { color: var(--ds-gold) !important; font-size: 1.3rem !important; font-weight: 950 !important; }
.tagline { color: #f4f0e8 !important; opacity: .94 !important; }
.env-badge {
  border-color: rgba(245,184,0,.78) !important;
  color: var(--ds-gold) !important;
  background: rgba(245,184,0,.05) !important;
}
.site-footer {
  background: var(--ds-black) !important;
  border-top-color: var(--ds-gold) !important;
}

.container {
  width: min(var(--ds-content), calc(100vw - 48px)) !important;
  padding-top: 30px !important;
}

/* Typography hierarchy */
h1,h2,h3,h4 { color: var(--ds-text); letter-spacing: -.018em; }
h1 { font-weight: 900; }
h2 { font-weight: 850; }
h3 { font-weight: 800; }
.eyebrow,
.doc-eyebrow,
.msg-eyebrow { color: var(--ds-gold-dark) !important; letter-spacing: .12em; font-weight: 900; }
.lead,
.doc-lead,
.msg-header p { color: var(--ds-muted) !important; }

/* Shared panel system */
.card,
.foundation,
.error-card,
.metric-card,
.panel,
.principle-note,
.boundary-note,
.scope-note,
.domain-card,
.signal-card,
.doc-row,
.doc-empty,
.doc-step,
.doc-detail-card,
.thread-row,
.msg-empty,
.msg-form,
.conversation {
  border-color: var(--ds-line) !important;
  border-radius: var(--ds-radius-lg) !important;
  box-shadow: var(--ds-shadow-sm) !important;
}

.card,
.metric-card,
.panel,
.domain-card,
.signal-card {
  transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}
.card:hover,
.domain-card:hover,
.signal-card:hover {
  border-color: #d7bc70 !important;
  box-shadow: var(--ds-shadow) !important;
}

/* Hero areas across old modules */
.education-hero,
.football-hero,
.talent-hero,
.dev-hero,
.funeral-hero,
.cemetery-hero,
.insurance-hero,
.payment-hero,
.claims-hero,
.shared-hero,
.exec-hero {
  background: linear-gradient(135deg, #fffdf8 0%, #fff5d6 100%) !important;
  border: 1px solid var(--ds-line) !important;
  border-top: 5px solid var(--ds-gold) !important;
  border-radius: var(--ds-radius-lg) !important;
  box-shadow: var(--ds-shadow) !important;
}

/* Buttons */
button,
.btn,
.primary-button,
.action-button,
.doc-primary,
.msg-primary,
.secondary-link,
.doc-secondary,
.msg-secondary {
  min-height: 44px;
  border-radius: 11px !important;
  font-weight: 850 !important;
  transition: transform .12s ease, filter .12s ease, box-shadow .12s ease;
}
button:not(:disabled):hover,
.btn:not(:disabled):hover,
.primary-button:hover,
.action-button:hover,
.doc-primary:hover,
.msg-primary:hover { transform: translateY(-1px); }
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: none !important;
  box-shadow: var(--ds-focus) !important;
}
button:disabled { opacity: .58; cursor: not-allowed; }

/* Inputs */
input:not([type="checkbox"]):not([type="radio"]),
select,
textarea {
  width: 100%;
  min-height: 44px;
  border: 1px solid #d7d0c3 !important;
  border-radius: 10px !important;
  background: #fff !important;
  color: var(--ds-text) !important;
  padding: 10px 12px;
}
textarea { min-height: 110px; resize: vertical; }
label { color: var(--ds-text); }
::placeholder { color: #999187; opacity: 1; }

/* Tables */
.table-wrap {
  border: 1px solid var(--ds-line-soft);
  border-radius: var(--ds-radius);
  overflow: auto;
  background: #fff;
}
table { border-collapse: collapse; width: 100%; }
th {
  color: #5d4c23 !important;
  background: #fbf8f0;
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .045em;
  font-weight: 850;
}
th, td { padding: 13px 14px; }
tbody tr:hover { background: #fffaf0; }

/* Status language */
.status-pill,
.pill,
.provider-chip,
.engine-chip,
.badge {
  border-radius: 999px !important;
  font-weight: 800 !important;
}
.pill { background: #fff2bd !important; color: #352800 !important; }
.status-success { color: var(--ds-success) !important; background: #ebf7ee !important; }
.status-warning { color: var(--ds-warning) !important; background: #fff5d6 !important; }
.status-danger { color: var(--ds-danger) !important; background: #fff0ef !important; }
.status-info { color: var(--ds-info) !important; background: #edf4fa !important; }

/* Empty states / friendly operational UI */
.empty-state,
.doc-empty,
.msg-empty {
  padding: 44px 24px !important;
  text-align: center;
}
.empty-state h2,
.doc-empty h2,
.msg-empty h2 { margin-bottom: 6px; }

/* KPI cards */
.metric-card { position: relative; overflow: hidden; }
.metric-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 3px;
  background: var(--ds-gold);
}

/* Utility classes used by future packages */
.ds-page-header { display:flex; align-items:flex-start; justify-content:space-between; gap:24px; margin-bottom:24px; }
.ds-page-title { margin: 3px 0 7px; }
.ds-page-subtitle { margin:0; max-width:760px; color:var(--ds-muted); }
.ds-actions { display:flex; flex-wrap:wrap; gap:10px; align-items:center; }
.ds-grid-2 { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.ds-grid-3 { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.ds-grid-4 { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; }
.ds-panel { background:#fff; border:1px solid var(--ds-line); border-radius:var(--ds-radius-lg); box-shadow:var(--ds-shadow-sm); padding:20px; }
.ds-panel-title { margin:0 0 4px; font-size:1.05rem; }
.ds-muted { color:var(--ds-muted); }
.ds-divider { border:0; border-top:1px solid var(--ds-line-soft); margin:18px 0; }

/* Consistent operation / detail split inspired by clean command-centre UX */
.ds-master-detail { display:grid; grid-template-columns:minmax(0,1.45fr) minmax(300px,.75fr); gap:18px; align-items:start; }
.ds-detail-sticky { position:sticky; top:106px; }

/* Mobile */
@media (max-width: 900px) {
  .ds-grid-4,.ds-grid-3 { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .ds-master-detail { grid-template-columns:1fr; }
  .ds-detail-sticky { position:static; }
}
@media (max-width: 700px) {
  body { font-size:15px; }
  .container { width: min(100% - 24px, var(--ds-content)) !important; padding-top:20px !important; }
  .topbar { min-height:72px !important; padding:8px 12px !important; }
  .brand-logo { width:52px !important; height:52px !important; }
  .brand { font-size:1.08rem !important; }
  .tagline { font-size:.72rem !important; }
  .ds-page-header { flex-direction:column; gap:14px; }
  .ds-actions { width:100%; }
  .ds-actions > * { flex:1 1 100%; }
  .ds-grid-4,.ds-grid-3,.ds-grid-2 { grid-template-columns:1fr; }
  .site-footer { padding:14px 16px !important; }
  th,td { padding:11px 12px; }
}

/* Motion respect */
@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after { scroll-behavior:auto !important; transition:none !important; animation:none !important; }
}