/* Design tokens — navy + teal + coral on cool neutrals.
 * Use canonical --ds-* names in new CSS; deprecated aliases remain for compat. */

:root {
  /* --- Color: core (12) --- */
  --color-navy:       #022438;
  --color-navy-hero:  #192A40;
  --color-teal:       #285666;
  --color-coral:      #FF646C;
  --color-coral-deep: #FC5656;
  --color-black:      #000000;
  --color-charcoal:   #292929;
  --color-gray-700:   #6F6F6F;
  --color-gray-600:   #797979;
  --color-gray-200:   #E7ECEE;
  --color-white:      #FFFFFF;

  --ds-ink:           var(--color-charcoal);
  --ds-ink-muted:     var(--color-gray-700);
  --ds-surface:       var(--color-gray-200);
  --ds-border:        #cdd5d9;
  --ds-success:       #166534;
  --ds-warning:       #9a2a32;
  --ds-danger:        #991b1b;
  --ds-focus-ring:    rgba(255, 100, 108, 0.25);

  /* --- Type: families --- */
  --font-serif:       'Libre Baskerville', Georgia, serif;
  --font-sans:        'Almarai', system-ui, -apple-system, sans-serif;
  --ds-font-sans:     var(--font-sans);
  --ds-font-display:  var(--font-serif);

  /* --- Type: sizes (5) --- */
  --ds-text-small:    0.8125rem;                                           /* 13px — captions, labels, nav */
  --ds-text-body:     1rem;                                                /* 16px — default copy, forms */
  --ds-text-large:    1.125rem;                                            /* 18px — in-card emphasis */
  --ds-text-heading:  clamp(1.375rem, 1vw + 1.25rem, 1.625rem);           /* 22–26px — section + card titles */
  --ds-text-display:  clamp(1.5rem, 0.8vw + 1.25rem, 1.875rem);         /* 24–30px — page titles */

  /* --- Type: weights (2) --- */
  --ds-weight-regular: 400;
  --ds-weight-bold:    700;

  /* --- Type: tracking (2) --- */
  --ds-tracking-tight: 0;
  --ds-tracking-caps:  0.12em;

  /* --- Type: line-height (3) --- */
  --ds-leading-tight:  1.2;
  --ds-leading-body:   1.6;
  --ds-leading-single: 1;

  /* --- Status hues (analytics bubbles, 6) --- */
  --ds-status-muted:   var(--color-gray-600);
  --ds-status-sent:    #8a9096;
  --ds-status-pending: #d97706;
  --ds-status-signed:  #16a34a;
  --ds-status-closed:  var(--color-teal);
  --ds-status-fund:    var(--color-coral-deep);

  --ds-status-muted-light:   color-mix(in srgb, var(--ds-status-muted) 72%, white);
  --ds-status-sent-light:    color-mix(in srgb, var(--ds-status-sent) 72%, white);
  --ds-status-pending-light: color-mix(in srgb, var(--ds-status-pending) 72%, white);
  --ds-status-signed-light:  color-mix(in srgb, var(--ds-status-signed) 72%, white);
  --ds-status-closed-light:  color-mix(in srgb, var(--ds-status-closed) 72%, white);
  --ds-status-fund-light:    color-mix(in srgb, var(--ds-status-fund) 72%, white);

  /* --- Fund chips --- */
  --ds-fund-chip-bg:           var(--ds-surface);
  --ds-fund-chip-bg-hover:     color-mix(in srgb, var(--color-coral-deep) 10%, var(--ds-surface));
  --ds-fund-chip-border:       var(--ds-border);
  --ds-fund-chip-border-hover: color-mix(in srgb, var(--color-coral-deep) 35%, var(--ds-border));
  --ds-fund-chip-accent:       var(--color-navy);
  --ds-fund-chip-text:         var(--color-navy);
  --ds-fund-chip-meta:         var(--ds-ink-muted);

  /* --- Deprecated aliases (do not use in new CSS) --- */
  --ds-ink-soft:          var(--ds-ink-muted);
  --ds-mahogany-deep:     var(--color-navy);
  --ds-mahogany:          var(--color-navy-hero);
  --ds-mahogany-mid:      var(--color-teal);
  --ds-leather:           var(--color-teal);
  --ds-leather-light:     #34707f;
  --ds-gold:              var(--color-coral);
  --ds-gold-bright:       #ff7a80;
  --ds-brass:             var(--color-coral-deep);
  --ds-gold-dim:          var(--color-coral-deep);
  --ds-parchment:         var(--color-white);
  --ds-parchment-mid:     var(--ds-surface);
  --ds-parchment-shadow:  var(--ds-border);
  --ds-velvet:            var(--color-navy);
  --ds-velvet-light:      var(--color-navy-hero);

  --ds-text-caption: var(--ds-text-small);
  --ds-text-xs:      var(--ds-text-small);
  --ds-text-eyebrow: var(--ds-text-small);
  --ds-text-sm:      var(--ds-text-small);
  --ds-text-nav:     var(--ds-text-small);
  --ds-text-base:    var(--ds-text-body);
  --ds-text-md:      var(--ds-text-large);
  --ds-text-lg:      var(--ds-text-large);
  --ds-text-xl:      var(--ds-text-heading);
  --ds-text-title:   var(--ds-text-heading);
  --ds-text-h3:      var(--ds-text-heading);
  --ds-text-section: var(--ds-text-heading);
  --ds-text-h2:      var(--ds-text-heading);
  --ds-text-hero:    var(--ds-text-display);
  --ds-text-h1:      var(--ds-text-display);

  --ds-weight-normal:   var(--ds-weight-regular);
  --ds-weight-medium:   var(--ds-weight-regular);
  --ds-weight-semibold: var(--ds-weight-bold);

  --ds-tracking-ui:      var(--ds-tracking-tight);
  --ds-tracking-eyebrow: var(--ds-tracking-caps);
  --ds-tracking-nav:     var(--ds-tracking-caps);

  --ds-leading-h1:     var(--ds-leading-tight);
  --ds-leading-h2:     var(--ds-leading-tight);
  --ds-leading-h3:     var(--ds-leading-tight);
  --ds-leading-normal: var(--ds-leading-body);
  --ds-leading-loose:  var(--ds-leading-body);

  --ds-icon-nav: var(--ds-text-small);

  --ds-bubble-default:         var(--ds-status-muted);
  --ds-bubble-default-light:   var(--ds-status-muted-light);
  --ds-bubble-draft:           var(--ds-status-muted);
  --ds-bubble-draft-light:     var(--ds-status-muted-light);
  --ds-bubble-sent-link:       var(--ds-status-sent);
  --ds-bubble-sent-link-light: var(--ds-status-sent-light);
  --ds-bubble-in-review:       var(--ds-status-pending);
  --ds-bubble-in-review-light: var(--ds-status-pending-light);
  --ds-bubble-in-kyc:          var(--ds-status-pending);
  --ds-bubble-in-kyc-light:    var(--ds-status-pending-light);
  --ds-bubble-signed:          var(--ds-status-signed);
  --ds-bubble-signed-light:    var(--ds-status-signed-light);
  --ds-bubble-closed:          var(--ds-status-closed);
  --ds-bubble-closed-light:    var(--ds-status-closed-light);
  --ds-bubble-fund:            var(--ds-status-fund);
  --ds-bubble-fund-light:      var(--ds-status-fund-light);
}

/* --- Page & typography --- */
body {
  font-family: var(--ds-font-sans);
  font-size: var(--ds-text-body);
  font-weight: var(--ds-weight-regular);
  line-height: var(--ds-leading-body);
  color: var(--ds-ink);
  background-color: var(--color-white);
  background-image: none;
  min-height: 100vh;
}

/* Reset heading defaults — use semantic classes for visual hierarchy. */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--ds-font-sans);
  font-weight: inherit;
  font-size: inherit;
  color: inherit;
  letter-spacing: inherit;
  line-height: inherit;
  margin-bottom: 0;
}

/* In-app subheads (card tiles, modals) — sans, not display serif. */
.ds-app h5,
.ds-app h6 {
  font-family: var(--ds-font-sans);
  font-size: var(--ds-text-large);
  font-weight: var(--ds-weight-bold);
  line-height: var(--ds-leading-tight);
  color: var(--color-navy);
}

.navbar-brand {
  font-family: var(--ds-font-sans);
  font-size: var(--ds-text-large);
  font-weight: var(--ds-weight-bold);
  color: var(--color-navy);
}

/* --- Semantic type roles --- */
.ds-page-header {
  margin-bottom: 1rem;
}

/* Hero H1 */
.ds-page-title {
  font-family: var(--ds-font-display);
  font-size: var(--ds-text-display);
  font-weight: var(--ds-weight-regular);
  line-height: var(--ds-leading-tight);
  letter-spacing: var(--ds-tracking-tight);
  color: var(--color-navy);
}

.ds-page-lead {
  font-size: var(--ds-text-body);
  font-weight: var(--ds-weight-regular);
  line-height: var(--ds-leading-body);
  color: var(--ds-ink-muted);
  margin-bottom: 0;
  max-width: 42rem;
}

/* Section H2 */
.ds-section-title,
.ds-section-heading {
  font-family: var(--ds-font-display);
  font-size: var(--ds-text-heading);
  font-weight: var(--ds-weight-bold);
  line-height: var(--ds-leading-tight);
  letter-spacing: var(--ds-tracking-tight);
  color: var(--color-navy);
}

/* Article title H3 */
.ds-card-title,
.ds-admin-card-title {
  font-family: var(--ds-font-display);
  font-size: var(--ds-text-heading);
  font-weight: var(--ds-weight-bold);
  line-height: var(--ds-leading-tight);
  letter-spacing: var(--ds-tracking-tight);
  color: var(--color-navy);
}

/* Second-level segmented control (notifications, admin, funds). */
.ds-subtabs {
  border-bottom: 1px solid var(--ds-border);
  gap: 2px;
}
.ds-subtabs .nav-link {
  font-family: var(--ds-font-sans);
  font-weight: var(--ds-weight-bold);
  font-size: var(--ds-text-body);
  color: var(--ds-ink-muted);
  border: 0;
  border-bottom: 2px solid transparent;
  padding: 8px 14px;
}
.ds-subtabs .nav-link:hover {
  color: var(--color-navy);
  background: transparent;
}
.ds-subtabs .nav-link.active {
  color: var(--color-navy);
  background: transparent;
  border-bottom-color: var(--color-navy);
}

/* Card wrapper shared by sub-tab panels — soft shadow, no hard border. */
.ds-admin-card {
  border: 0;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
}

/* Card header row: section title left, primary action right. */
.ds-admin-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

/* Fund setup — vertical document upload slots with status row. */
.ds-fund-doc-upload-stack {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.ds-fund-doc-slot {
  padding: 12px;
  border: 1px solid var(--ds-border);
  border-radius: 8px;
  background: var(--color-white);
}
.ds-fund-doc-slot-head {
  min-height: 28px;
}
.ds-upload-zone-minimal {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  text-align: center;
}
.ds-upload-zone-name {
  font-family: var(--ds-font-display);
  font-size: var(--ds-text-body);
  font-weight: var(--ds-weight-bold);
  color: var(--ds-ink);
  line-height: 1.2;
}

/* Investor fund detail — reference docs as parchment chips under the fund
   name (document type + download icon), no surrounding card. */
.ds-fund-doc-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}
.ds-fund-doc-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 8px;
  background: var(--ds-fund-chip-bg);
  border: 1px solid var(--ds-fund-chip-border);
  color: var(--ds-fund-chip-text);
  font-size: var(--ds-text-small);
  font-weight: var(--ds-weight-regular);
  text-decoration: none;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.ds-fund-doc-chip:hover,
.ds-fund-doc-chip:focus {
  background: var(--ds-fund-chip-bg-hover);
  border-color: var(--ds-fund-chip-border-hover);
  color: var(--ds-fund-chip-text);
  text-decoration: none;
}
.ds-fund-doc-chip-icon {
  font-size: var(--ds-text-body);
  line-height: 1;
  color: var(--ds-fund-chip-accent);
}

/* Fund detail — compact chips for team members and investors. */
.ds-fund-person-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.ds-fund-person-chip {
  display: inline-flex;
  align-items: flex-start;
  gap: 6px;
  max-width: 100%;
  padding: 8px 10px;
  border-radius: 8px;
  background: var(--ds-fund-chip-bg);
  border: 1px solid var(--ds-fund-chip-border);
  color: var(--ds-fund-chip-text);
  font-size: var(--ds-text-small);
}
.ds-fund-person-chip-body {
  flex: 1 1 auto;
  min-width: 0;
}
.ds-fund-person-chip-name {
  display: block;
  font-weight: var(--ds-weight-bold);
  line-height: 1.25;
  color: var(--ds-fund-chip-text);
}
.ds-fund-person-chip-meta {
  display: block;
  font-size: var(--ds-text-small);
  line-height: 1.25;
  color: var(--ds-fund-chip-meta);
  word-break: break-word;
}
.ds-fund-person-chip-remove {
  flex: 0 0 auto;
  padding: 0 !important;
  margin: -2px -2px 0 0;
  color: var(--ds-fund-chip-accent) !important;
  opacity: 0.65;
  line-height: 1;
}
.ds-fund-person-chip-remove:hover,
.ds-fund-person-chip-remove:focus {
  opacity: 1;
  color: var(--color-navy) !important;
}
.ds-fund-person-chip--add {
  align-items: center;
  min-width: 240px;
  max-width: min(100%, 360px);
  border-style: dashed;
}
.ds-fund-person-chip--add-prior {
  min-width: 300px;
  max-width: min(100%, 440px);
}
.ds-fund-person-chip--add-wide {
  min-width: 240px;
  max-width: min(100%, 360px);
}
.ds-fund-person-chip--add .ds-fund-person-chip-name {
  font-size: var(--ds-text-small);
  font-weight: var(--ds-weight-regular);
  margin-bottom: 2px;
  color: var(--ds-ink-muted);
}
.ds-fund-person-chip-add {
  flex: 0 0 auto;
  padding: 0 !important;
  margin: 0 -2px 0 0;
  color: var(--ds-fund-chip-accent) !important;
  opacity: 0.85;
  line-height: 1;
}
.ds-fund-person-chip-add:hover:not(:disabled),
.ds-fund-person-chip-add:focus:not(:disabled) {
  opacity: 1;
  color: var(--color-navy) !important;
}
.ds-fund-person-chip-add:disabled {
  opacity: 0.35;
}
.ds-fund-person-chip-dropdown {
  width: 100%;
  min-width: 0;
  font-size: var(--ds-text-small);
}
.ds-fund-person-chip-dropdown .Select-control,
.ds-fund-person-chip-dropdown div[class*="-control"] {
  min-height: 28px !important;
  height: auto !important;
  border-radius: 6px !important;
  border-color: var(--ds-border) !important;
  background: var(--color-white) !important;
  box-shadow: none !important;
}
.ds-fund-person-chip-dropdown .Select-value,
.ds-fund-person-chip-dropdown div[class*="-singleValue"] {
  line-height: 1.25 !important;
  font-size: var(--ds-text-small) !important;
  white-space: normal !important;
  color: var(--ds-fund-chip-text) !important;
}
.ds-fund-person-chip-dropdown div[class*="-placeholder"] {
  color: var(--ds-ink-muted) !important;
  font-size: var(--ds-text-small) !important;
}
.ds-fund-person-chip-dropdown div[class*="-menu"] {
  min-width: 100%;
  width: max-content;
  max-width: min(440px, 92vw);
  border-color: var(--ds-border) !important;
  z-index: 20;
}
.ds-fund-person-chip-dropdown div[class*="-option"] {
  white-space: normal;
  word-break: break-word;
  font-size: var(--ds-text-small) !important;
  color: var(--ds-fund-chip-text) !important;
}
.ds-fund-person-chip-dropdown div[class*="-option"]:hover,
.ds-fund-person-chip-dropdown div[class*="-option"][class*="-focused"] {
  background: var(--ds-fund-chip-bg-hover) !important;
  color: var(--ds-fund-chip-text) !important;
}
.ds-fund-person-chip-input {
  font-size: var(--ds-text-small) !important;
  padding: 2px 6px !important;
  height: 28px !important;
  border-color: var(--ds-border) !important;
  background: var(--color-white) !important;
  color: var(--ds-fund-chip-text) !important;
}
.ds-fund-person-chip-input::placeholder {
  color: var(--ds-ink-muted);
  opacity: 0.85;
}
/* Eyebrow label — sans, coral accent (sparing use) */
.ds-overline,
.ds-label-caps {
  font-family: var(--ds-font-sans);
  font-size: var(--ds-text-small);
  font-weight: var(--ds-weight-bold);
  line-height: var(--ds-leading-body);
  letter-spacing: var(--ds-tracking-caps);
  text-transform: uppercase;
  color: var(--color-coral);
}

/* Mixed-weight serif headings — rhythm inside a single sentence. */
.ds-page-title .ds-title-light,
.ds-section-title .ds-title-light {
  font-weight: var(--ds-weight-regular);
}
.ds-page-title .ds-title-bold,
.ds-section-title .ds-title-bold {
  font-weight: var(--ds-weight-bold);
}
.ds-page-title .ds-title-italic,
.ds-section-title .ds-title-italic {
  font-style: italic;
}
.ds-accent-coral {
  color: var(--color-coral);
}

.ds-page-header--centered {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}
.ds-page-header--centered .ds-page-lead {
  margin-left: auto;
  margin-right: auto;
}

.ds-app .small,
.ds-app small {
  font-size: var(--ds-text-small);
}

.ds-app .lead {
  font-size: var(--ds-text-body);
  font-weight: var(--ds-weight-regular);
  line-height: var(--ds-leading-body);
  color: var(--ds-ink-muted);
}

.ds-text-small,
.ds-text-caption,
.ds-text-xs { font-size: var(--ds-text-small); }
.ds-text-body,
.ds-text-base { font-size: var(--ds-text-body); }
.ds-text-large,
.ds-text-md,
.ds-text-lg { font-size: var(--ds-text-large); }
.ds-text-heading,
.ds-text-title,
.ds-text-section,
.ds-text-xl { font-size: var(--ds-text-heading); }
.ds-text-display,
.ds-text-hero { font-size: var(--ds-text-display); }

.ds-text-regular,
.ds-text-normal { font-weight: var(--ds-weight-regular); }
.ds-text-medium { font-weight: var(--ds-weight-regular); }
.ds-text-semibold,
.ds-text-bold { font-weight: var(--ds-weight-bold); }

.ds-icon-lg { font-size: var(--ds-text-large); line-height: 1; }
.ds-icon-hero { font-size: var(--ds-text-display); line-height: 1; }

.ds-form-label {
  font-size: var(--ds-text-small);
  font-weight: var(--ds-weight-regular);
  color: var(--ds-ink-muted);
}

.ds-app.container-fluid,
.ds-app.container {
  padding-left: 0;
  padding-right: 0;
  padding-bottom: 3.5rem;
}

/* --- Top bar — mahogany & brass --- */
.ds-navbar.navbar {
  background: linear-gradient(
    180deg,
    var(--color-teal) 0%,
    var(--color-navy-hero) 45%,
    var(--color-navy) 100%
  ) !important;
  border-bottom: 3px solid var(--color-coral);
  box-shadow:
    0 4px 20px rgba(0, 0, 0, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  padding-top: 0.6rem;
  padding-bottom: 0.6rem;
}

.ds-navbar .navbar-brand {
  font-family: var(--ds-font-sans);
  font-size: var(--ds-text-large) !important;
  font-weight: var(--ds-weight-bold);
  color: var(--color-white) !important;
  letter-spacing: 0.06em;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

.ds-navbar .nav-link {
  color: var(--color-gray-200) !important;
  font-family: var(--ds-font-sans);
  font-size: var(--ds-text-small);
  font-weight: var(--ds-weight-bold);
  letter-spacing: var(--ds-tracking-caps);
  text-transform: uppercase;
  padding: 0.5rem 0.85rem !important;
  border-radius: 0;
  transition: color 0.2s ease, background 0.2s ease;
}

.ds-navbar .nav-link:hover {
  color: var(--ds-gold-bright) !important;
  background: rgba(255, 255, 255, 0.06);
}

.ds-navbar .btn-ds-gold {
  background: linear-gradient(180deg, var(--color-coral) 0%, var(--color-coral-deep) 100%);
  border: 1px solid var(--color-teal);
  color: var(--color-white) !important;
  font-family: var(--ds-font-sans);
  font-weight: var(--ds-weight-bold);
  letter-spacing: 0.04em;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
}

.ds-navbar .btn-ds-gold:hover {
  filter: brightness(1.08);
  color: var(--color-white) !important;
}

/* --- Cards — leather trim, parchment face --- */
.ds-app .card {
  background: linear-gradient(180deg, var(--color-white) 0%, var(--color-white) 100%);
  /* Layered shadow instead of a hard border for a more modern feel. */
  border: 1px solid transparent;
  border-radius: 8px;
  box-shadow:
    0 1px 3px rgba(10, 22, 40, 0.08),
    0 4px 12px rgba(10, 22, 40, 0.05);
}

.ds-app .card-header {
  background: linear-gradient(
    180deg,
    var(--color-teal) 0%,
    var(--color-navy-hero) 100%
  );
  color: var(--color-white);
  font-family: var(--ds-font-sans);
  font-weight: var(--ds-weight-bold);
  letter-spacing: 0.03em;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.ds-app .card-header .btn-close,
.ds-app .card-header .btn-link {
  color: var(--color-gray-600) !important;
}

/* Bootstrap btn-link / alert-link default to bright blue underlines —
 * override to the navy ghost-action pattern used elsewhere. */
.ds-app .btn-link {
  color: var(--ds-ink-muted) !important;
  text-decoration: none !important;
  font-weight: var(--ds-weight-regular);
  box-shadow: none !important;
}
.ds-app .btn-link:hover,
.ds-app .btn-link:focus {
  color: var(--color-navy) !important;
  text-decoration: none !important;
}
.ds-app .btn-link.text-danger {
  color: var(--ds-danger) !important;
}
.ds-app .btn-link.text-danger:hover,
.ds-app .btn-link.text-danger:focus {
  color: #7f1d1d !important;
}
.ds-app .alert-link {
  color: var(--color-navy) !important;
  font-weight: var(--ds-weight-bold);
  text-decoration: none !important;
}
.ds-app .alert-link:hover,
.ds-app .alert-link:focus {
  color: var(--color-navy) !important;
  text-decoration: none !important;
}

/* --- Buttons — ghost default; filled reserved for primary CTA --- */
/* Square corners are the house style for every button. Set once on the
   base .btn so any variant (including Bootstrap defaults like btn-ds-gold,
   btn-danger, btn-sm) inherits it instead of relying on each variant to
   re-declare border-radius: 0. */
.ds-app .btn {
  border-radius: 0;
}

.ds-app a.btn {
  text-decoration: none;
  display: inline-block;
}

.ds-app a.btn:hover,
.ds-app a.btn:focus,
.ds-app a.btn:active {
  text-decoration: none;
}

.ds-app .btn-primary {
  background: var(--color-coral);
  border: 1px solid var(--color-coral);
  color: var(--color-white);
  font-family: var(--ds-font-sans);
  font-weight: var(--ds-weight-bold);
  font-size: var(--ds-text-small);
  letter-spacing: var(--ds-tracking-caps);
  text-transform: uppercase;
  border-radius: 0;
  box-shadow: none;
}

.ds-app .btn-primary:hover,
.ds-app .btn-primary:focus {
  background: var(--color-coral-deep);
  border-color: var(--color-coral-deep);
  color: var(--color-white);
}

.ds-app .btn-success {
  background: transparent;
  border: 1px solid var(--ds-success);
  color: var(--ds-success);
  font-family: var(--ds-font-sans);
  font-weight: var(--ds-weight-bold);
  font-size: var(--ds-text-small);
  letter-spacing: var(--ds-tracking-caps);
  text-transform: uppercase;
  border-radius: 0;
}

.ds-app .btn-success:hover {
  background: var(--ds-success);
  border-color: var(--ds-success);
  color: var(--color-white);
}

.ds-app .btn-outline-primary,
.ds-app .btn-outline-secondary,
.ds-app .btn-ds-ghost,
.ds-btn-ghost {
  color: var(--color-navy);
  border: 1px solid var(--color-navy);
  background: transparent;
  font-family: var(--ds-font-sans);
  font-weight: var(--ds-weight-bold);
  font-size: var(--ds-text-small);
  letter-spacing: var(--ds-tracking-caps);
  text-transform: uppercase;
  border-radius: 0;
  box-shadow: none;
}

.ds-app .btn-outline-primary:hover,
.ds-app .btn-outline-secondary:hover,
.ds-app .btn-ds-ghost:hover,
.ds-btn-ghost:hover {
  background: var(--color-navy);
  border-color: var(--color-navy);
  color: var(--color-white);
}

/* Ghost on dark surfaces (hero, navy panels). */
.ds-btn-ghost-light,
.ds-hero .ds-btn-ghost,
.ds-hero .btn-outline-primary,
.ds-hero .btn-outline-secondary {
  color: var(--color-white) !important;
  border-color: var(--color-white) !important;
  background: transparent !important;
}

.ds-btn-ghost-light:hover,
.ds-hero .ds-btn-ghost:hover,
.ds-hero .btn-outline-primary:hover,
.ds-hero .btn-outline-secondary:hover {
  background: var(--color-white) !important;
  border-color: var(--color-white) !important;
  color: var(--color-navy) !important;
}

/* --- Lists --- */
.ds-app .list-group-item {
  background: var(--color-white);
  border-color: var(--ds-border);
  color: var(--ds-ink);
}

.ds-app .list-group-item:hover {
  background: var(--ds-surface);
}

/* --- Alerts — muted, ink on parchment --- */
.ds-app .alert-light {
  background: linear-gradient(180deg, var(--color-white) 0%, var(--ds-surface) 100%);
  border: 1px solid var(--ds-border);
  color: var(--ds-ink-muted);
}

.ds-app .alert-info {
  background: linear-gradient(180deg, var(--ds-surface) 0%, var(--ds-border) 100%);
  border-color: var(--color-teal);
  color: var(--ds-ink);
}

.ds-app .alert-success {
  background: linear-gradient(180deg, #e0ebe2 0%, #c8d6cc 100%);
  border-color: #5a7a62;
  color: var(--ds-success);
}

.ds-app .alert-warning {
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--color-coral) 14%, var(--color-white)) 0%,
    color-mix(in srgb, var(--color-coral) 28%, var(--color-white)) 100%
  );
  border-color: var(--color-coral);
  color: var(--ds-warning);
}

.ds-app .alert-danger {
  background: linear-gradient(180deg, #f0e0e0 0%, #e0c8c8 100%);
  border-color: #8a5a5a;
  color: var(--ds-danger);
}

/* --- Badges — soft tints with dark text for WCAG AA, pill-shaped --- */
.ds-app .badge {
  border-radius: 999px;
  font-size: var(--ds-text-small);
  font-weight: var(--ds-weight-bold);
  letter-spacing: 0.01em;
}

.ds-app .badge.bg-secondary {
  background: var(--ds-surface) !important;
  color: var(--color-charcoal) !important;
}

/* in_review / in_kyc_review — soft teal tint with strong teal text. */
.ds-app .badge.bg-warning {
  background: #dce8eb !important;
  color: var(--color-teal) !important;
}

.ds-app .badge.bg-success {
  background: #dcfce7 !important;
  color: #166534 !important;
}

.ds-app .badge.bg-info {
  background: var(--ds-surface) !important;
  color: var(--color-teal) !important;
}

/* --- Forms --- */
.ds-app .form-control,
.ds-app .form-select,
.ds-app textarea {
  border: 1px solid var(--ds-border);
  background: var(--color-white);
  color: var(--ds-ink);
  font-family: var(--ds-font-sans);
  font-size: var(--ds-text-body);
}

.ds-app .form-control:focus {
  border-color: var(--color-navy);
  box-shadow: 0 0 0 0.2rem var(--ds-focus-ring);
}

/* --- Progress --- */
.ds-app .progress {
  background: var(--ds-surface);
  border: 1px solid var(--ds-border);
}

.ds-app .progress-bar {
  background: var(--color-navy);
}

/* --- Tabs (document sections) --- */
.ds-app .nav-tabs {
  border-bottom: 2px solid var(--ds-border);
  flex-wrap: wrap;
}
.ds-app .nav-tabs .nav-link {
  color: var(--ds-ink-muted);
  font-family: var(--ds-font-sans);
  font-size: var(--ds-text-small);
  font-weight: var(--ds-weight-bold);
  background: var(--ds-surface);
  border: 1px solid var(--ds-border);
  border-bottom: none;
  margin-right: 2px;
  margin-bottom: -1px;
  padding: 6px 14px;
  opacity: 0.7;
}
.ds-app .nav-tabs .nav-link:hover {
  opacity: 1;
  background: var(--color-white);
}
.ds-app .nav-tabs .nav-link.active,
.ds-app .nav-tabs .ds-admin-tab-active {
  color: var(--color-navy);
  background: var(--color-white);
  border-color: var(--ds-border) var(--ds-border) transparent;
  opacity: 1;
  font-weight: var(--ds-weight-bold);
}

/* --- Upload drop zone --- */
.ds-upload-zone {
  border: 2px dashed var(--color-navy) !important;
  border-radius: 0;
  background: linear-gradient(180deg, var(--color-white) 0%, var(--ds-surface) 100%) !important;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.ds-upload-zone:hover {
  border-color: var(--color-teal) !important;
  box-shadow: inset 0 0 0 1px rgba(2, 36, 56, 0.08);
}

.ds-upload-zone * .text-muted {
  color: var(--ds-ink-muted) !important;
}

.ds-link-accent {
  color: var(--color-navy) !important;
  font-weight: var(--ds-weight-regular);
  text-decoration: none;
}

.ds-link-accent:hover,
.ds-link-accent:focus {
  color: var(--color-navy) !important;
  text-decoration: none;
}