/* Brand — navy + teal + coral on cool neutrals. Legacy --ds-* names retained
   for backwards compatibility; values map to canonical --color-* tokens. */

:root {
  /* Brand */
  --color-navy:          #022438;   /* primary brand, logo, headings */
  --color-navy-hero:     #192A40;   /* hero overlay tone */
  --color-teal:          #285666;   /* secondary teal-navy accent */
  --color-coral:         #FF646C;   /* accent / CTA highlight */
  --color-coral-deep:    #FC5656;

  /* Neutrals */
  --color-black:         #000000;   /* alert bar + diagonal bands */
  --color-charcoal:      #292929;   /* strongest body text */
  --color-gray-700:      #6F6F6F;
  --color-gray-600:      #797979;
  --color-gray-200:      #E7ECEE;
  --color-white:         #FFFFFF;

  /* Type */
  --font-serif:  'Libre Baskerville', Georgia, serif;
  --font-sans:   'Almarai', system-ui, -apple-system, sans-serif;

  /* Legacy aliases — map to brand tokens */
  --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;       /* lighter teal for hovers */
  --ds-gold:          var(--color-coral);
  --ds-gold-bright:   #ff7a80;       /* lighter coral for hovers */
  --ds-brass:         var(--color-coral-deep);
  --ds-gold-dim:      var(--color-coral-deep);
  --ds-parchment:        var(--color-white);
  --ds-parchment-mid:    var(--color-gray-200);
  --ds-parchment-shadow: #cdd5d9;
  --ds-velvet:        var(--color-navy);
  --ds-velvet-light:  var(--color-navy-hero);
  --ds-ink:           var(--color-charcoal);
  --ds-ink-soft:      var(--color-gray-700);
  --ds-success:       #166534;
  --ds-warning:       #854d0e;
  --ds-danger:        #991b1b;
  --ds-focus-ring:    rgba(255, 100, 108, 0.25);

  --ds-font-sans: var(--font-sans);
  --ds-font-display: var(--font-serif);

  /* Role scale (see semantic classes below). */
  --ds-text-eyebrow: 0.75rem;                                              /* 12px */
  --ds-text-nav:     clamp(0.8125rem, 0.15vw + 0.78rem, 0.875rem);       /* 13–14px */
  --ds-text-body:    clamp(1rem, 0.15vw + 0.97rem, 1.0625rem);           /* 16–17px */
  --ds-text-h3:      clamp(1.5rem, 1.2vw + 1.15rem, 1.75rem);            /* 24–28px */
  --ds-text-h2:      clamp(2rem, 1.5vw + 1.5rem, 2.5rem);                /* 32–40px */
  --ds-text-h1:      clamp(3rem, 2vw + 2.25rem, 3.5rem);                 /* 48–56px */

  /* Legacy utility scale (icons, badges, dense UI — not heading roles). */
  --ds-text-xs:   0.75rem;
  --ds-text-sm:   0.875rem;
  --ds-text-base: 1rem;
  --ds-text-md:   1.125rem;
  --ds-text-lg:   1.25rem;
  --ds-text-xl:   1.5rem;
  --ds-text-hero: var(--ds-text-h1);

  --ds-weight-normal:   400;
  --ds-weight-medium:   500;
  --ds-weight-semibold: 600;
  --ds-weight-bold:     700;

  --ds-tracking-tight:   0;
  --ds-tracking-ui:      0.01em;
  --ds-tracking-eyebrow: 0.15em;
  --ds-tracking-nav:     0.12em;
  --ds-tracking-caps:    var(--ds-tracking-eyebrow);

  --ds-leading-h1:     1.1;
  --ds-leading-h2:     1.2;
  --ds-leading-h3:     1.3;
  --ds-leading-body:   1.6;
  --ds-leading-tight:  var(--ds-leading-h2);
  --ds-leading-normal: var(--ds-leading-body);
  --ds-leading-loose:  var(--ds-leading-body);

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

/* --- Page & typography --- */
body {
  font-family: var(--ds-font-sans);
  font-size: var(--ds-text-body);
  font-weight: var(--ds-weight-normal);
  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;
}

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

/* --- 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-h1);
  font-weight: var(--ds-weight-normal);
  line-height: var(--ds-leading-h1);
  letter-spacing: var(--ds-tracking-tight);
  color: var(--ds-mahogany-deep);
}

.ds-page-lead {
  font-size: var(--ds-text-body);
  font-weight: var(--ds-weight-normal);
  line-height: var(--ds-leading-body);
  color: var(--ds-ink-soft);
  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-h2);
  font-weight: var(--ds-weight-bold);
  line-height: var(--ds-leading-h2);
  letter-spacing: var(--ds-tracking-tight);
  color: var(--ds-mahogany-deep);
}

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

/* Eyebrow label — sans, coral accent (sparing use) */
.ds-overline,
.ds-label-caps {
  font-family: var(--ds-font-sans);
  font-size: var(--ds-text-eyebrow);
  font-weight: var(--ds-weight-bold);
  line-height: var(--ds-leading-body);
  letter-spacing: var(--ds-tracking-eyebrow);
  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-normal);
}
.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-sm);
}

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

.ds-text-xs { font-size: var(--ds-text-xs); }
.ds-text-sm { font-size: var(--ds-text-sm); }
.ds-text-base { font-size: var(--ds-text-base); }
.ds-text-md { font-size: var(--ds-text-md); }
.ds-text-lg { font-size: var(--ds-text-lg); }
.ds-text-xl { font-size: var(--ds-text-xl); }
.ds-text-hero { font-size: var(--ds-text-hero); }

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

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

.ds-form-label {
  font-size: var(--ds-text-sm);
  font-weight: var(--ds-weight-medium);
  color: var(--ds-ink-soft);
}

.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(--ds-gold);
  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-lg) !important;
  font-weight: 700;
  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-nav);
  font-weight: var(--ds-weight-bold);
  letter-spacing: var(--ds-tracking-nav);
  text-transform: uppercase;
  padding: 0.5rem 0.85rem !important;
  border-radius: 4px;
  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(--ds-gold) 0%, var(--ds-brass) 100%);
  border: 1px solid var(--color-teal);
  color: var(--color-white) !important;
  font-family: var(--ds-font-sans);
  font-weight: 600;
  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(--ds-parchment) 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(--ds-mahogany-mid) 0%,
    var(--ds-mahogany) 100%
  );
  color: var(--color-white);
  font-family: var(--ds-font-sans);
  font-weight: 600;
  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;
}

/* --- Buttons — ghost default; filled reserved for primary CTA --- */
.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-nav);
  letter-spacing: var(--ds-tracking-nav);
  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-nav);
  letter-spacing: var(--ds-tracking-nav);
  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-nav);
  letter-spacing: var(--ds-tracking-nav);
  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-parchment-shadow);
  color: var(--ds-ink);
}

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

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

.ds-app .alert-info {
  background: linear-gradient(180deg, var(--ds-parchment-mid) 0%, var(--ds-parchment-shadow) 100%);
  border-color: var(--ds-leather);
  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, #fef3c7 0%, #fde68a 100%);
  border-color: var(--ds-brass);
  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-sm);
  font-weight: 600;
  letter-spacing: 0.01em;
}

.ds-app .badge.bg-secondary {
  background: var(--ds-parchment-mid) !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-parchment-mid) !important;
  color: var(--color-teal) !important;
}

/* --- Forms --- */
.ds-app .form-control,
.ds-app .form-select,
.ds-app textarea {
  border: 1px solid var(--ds-parchment-shadow);
  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-parchment-mid);
  border: 1px solid var(--ds-parchment-shadow);
}

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

/* --- Tabs (document sections) --- */
.ds-app .nav-tabs {
  border-bottom: 2px solid var(--ds-parchment-shadow);
  flex-wrap: wrap;
}
.ds-app .nav-tabs .nav-link {
  color: var(--ds-ink-soft);
  font-family: var(--ds-font-sans);
  font-size: var(--ds-text-sm);
  font-weight: var(--ds-weight-semibold);
  background: var(--ds-parchment-mid);
  border: 1px solid var(--ds-parchment-shadow);
  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(--ds-parchment);
}
.ds-app .nav-tabs .nav-link.active,
.ds-app .nav-tabs .ds-admin-tab-active {
  color: var(--ds-mahogany-deep);
  background: var(--ds-parchment);
  border-color: var(--ds-parchment-shadow) var(--ds-parchment-shadow) 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-parchment-mid) 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-soft) !important;
}

.ds-link-accent {
  color: var(--color-navy) !important;
  font-weight: 500;
}

.ds-link-accent:hover {
  color: var(--ds-mahogany-deep) !important;
}