@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Syne:wght@600;700;800&family=DM+Sans:wght@300;400;500&family=Figtree:wght@400;500;600&family=Outfit:wght@400;500;600&family=Plus+Jakarta+Sans:wght@400;500;600&display=swap');

/* ── FIS DARK THEME ───────────────────────────────────────────────────────── */
/* Override Bootstrap's CSS variables at every level they're set.
   Bootstrap sets vars on :root AND on individual components (.card, .table, etc.)
   so we need to override at both levels. */

:root {
  /* FIS palette */
  --fis-bg:          #0d1117;
  --fis-surface:     #161b22;
  --fis-surface2:    #1c2333;
  --fis-border:      #30363d;
  --fis-accent:      #3fb950;
  --fis-accent2:     #58a6ff;
  --fis-accent3:     #f0883e;
  --fis-text:        #e6edf3;
  --fis-text-dim:    #9da5ae;
  --fis-text-muted:  #484f58;

  /* Bootstrap body variables */
  --bs-body-bg:               #0d1117;
  --bs-body-color:            #9da5ae;
  --bs-emphasis-color:        #e6edf3;
  --bs-secondary-color:       #9da5ae;
  --bs-tertiary-color:        #484f58;
  --bs-border-color:          #30363d;
  --bs-border-color-translucent: rgba(48,54,61,0.5);

  /* Bootstrap link */
  --bs-link-color:            #58a6ff;
  --bs-link-hover-color:      #e6edf3;

  /* Bootstrap fonts */
  --bs-font-sans-serif:       'DM Sans', sans-serif;
  --bs-font-monospace:        'DM Mono', monospace;

  /* Bootstrap surface colors used by table-light, bg-light, etc. */
  --bs-light:                 #161b22;
  --bs-light-rgb:             22,27,34;
  --bs-light-text-emphasis:   #9da5ae;
  --bs-light-bg-subtle:       #161b22;
  --bs-light-border-subtle:   #30363d;

  /* Bootstrap card root vars (components also set these locally — see below) */
  --bs-card-bg:               #161b22;
  --bs-card-border-color:     #30363d;
  --bs-card-cap-bg:           rgba(255,255,255,0.03);
  --bs-card-color:            #9da5ae;

  /* Bootstrap table root vars */
  --bs-table-bg:              transparent;
  --bs-table-color:           #9da5ae;
  --bs-table-border-color:    #30363d;
  --bs-table-striped-bg:      rgba(255,255,255,0.02);
  --bs-table-hover-bg:        rgba(255,255,255,0.04);

  /* Bootstrap alert */
  --bs-alert-bg:              transparent;

  /* Bootstrap nav */
  --bs-nav-link-color:        #9da5ae;
  --bs-nav-link-hover-color:  #e6edf3;
  --bs-navbar-color:          #9da5ae;
  --bs-navbar-hover-color:    #e6edf3;
  --bs-navbar-active-color:   #3fb950;
  --bs-navbar-brand-color:    #3fb950;
  --bs-navbar-brand-hover-color: #3fb950;
  --bs-navbar-toggler-border-color: #30363d;
}

/* ── Component-level overrides (Bootstrap sets these on the selector itself) ── */

body {
  font-weight: 300;
}

/* Navbar */
.navbar {
  --bs-navbar-bg:             #0d1117;
  --bs-navbar-color:          #9da5ae;
  --bs-navbar-hover-color:    #e6edf3;
  --bs-navbar-active-color:   #3fb950;
  --bs-navbar-brand-color:    #3fb950;
  --bs-navbar-brand-hover-color: #3fb950;
  --bs-navbar-toggler-border-color: #30363d;
  background-color:           #0d1117 !important;
  border-bottom: 1px solid #30363d;
  font-family: 'DM Mono', monospace;
  font-size: 0.8rem;
}
.navbar-brand {
  font-family: 'Syne', sans-serif;
  font-weight: 800;
  color: #3fb950 !important;
}
.nav-link { color: #9da5ae !important; }
.nav-link:hover, .nav-link:focus { color: #e6edf3 !important; }
.nav-link.active { color: #3fb950 !important; }
.navbar-toggler { border-color: #30363d; }
/* Collapsed mobile menu background */
.navbar-collapse { background-color: #0d1117; padding: 0.5rem 0; }

/* Page header / jumbotron */
.container-fluid.border-bottom.bg-light {
  background-color: #161b22 !important;
  border-color: #30363d !important;
}
.container-fluid.border-bottom.bg-light h1 {
  font-family: 'Syne', sans-serif;
  font-weight: 800;
  color: #e6edf3;
}
.container-fluid.border-bottom.bg-light .lead {
  color: #9da5ae;
}
.container-fluid.border-bottom.bg-light .text-muted {
  color: #3fb950 !important;
  font-family: 'DM Mono', monospace;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Cards */
.card {
  --bs-card-bg:           #161b22;
  --bs-card-border-color: #30363d;
  --bs-card-color:        #9da5ae;
  --bs-card-cap-bg:       rgba(255,255,255,0.03);
}
.card-title { color: #e6edf3; }
.card-text  { color: #9da5ae; }
.card-footer {
  background: transparent;
  border-top-color: #30363d;
  color: #484f58;
  font-size: 0.78rem;
}

/* Tables */
.table {
  --bs-table-bg:           transparent;
  --bs-table-color:        #9da5ae;
  --bs-table-border-color: #30363d;
  --bs-table-hover-bg:     rgba(255,255,255,0.04);
  --bs-table-hover-color:  #9da5ae;
  --bs-table-striped-bg:   rgba(255,255,255,0.02);
}
.table thead th {
  font-family: 'DM Mono', monospace;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #9da5ae;
  border-bottom-color: #30363d;
}
.table-light { --bs-table-bg: #1c2333; --bs-table-color: #9da5ae; }
.table td:first-child { color: #e6edf3; font-weight: 500; }

/* Alerts */
.alert-info {
  --bs-alert-bg:          rgba(88,166,255,0.08);
  --bs-alert-border-color: rgba(88,166,255,0.25);
  --bs-alert-color:       #9da5ae;
  color: #9da5ae;
}
.alert-primary {
  --bs-alert-bg:           rgba(63,185,80,0.08);
  --bs-alert-border-color: rgba(63,185,80,0.25);
  --bs-alert-color:        #9da5ae;
}

/* Card with border-primary */
.border-primary { border-color: #58a6ff !important; }

/* Headings */
h1, h2, h3, h4, h5, h6 { color: #e6edf3; }
h2 { font-family: 'Syne', sans-serif; font-weight: 700; }
h5.card-title, h6.card-title { color: #e6edf3; }

/* text-muted */
.text-muted { color: #9da5ae !important; }
.text-uppercase.small { color: #3fb950 !important; font-family: 'DM Mono', monospace; letter-spacing: 0.06em; }

/* Links */
a { color: #58a6ff; }
a:hover { color: #e6edf3; }
.text-reset { color: inherit !important; }
.text-decoration-none:hover .card { border-color: #3fb950; }

/* Code */
pre, code {
  font-family: 'DM Mono', monospace;
  font-size: 0.82rem;
  background: #161b22;
  color: #58a6ff;
  border: 1px solid #30363d;
  border-radius: 4px;
}
pre {
  padding: 1.25rem 1.5rem;
  border-left: 3px solid #3fb950;
  border-radius: 8px;
  color: #9da5ae;
  overflow-x: auto;
}
pre code { background: none; border: none; padding: 0; color: inherit; }
/* ── Tocbot — hide scroll progress bar entirely ── */
.toc-progress,
.toc-progress-indicator { display: none !important; }

/* ── Style guide utility classes (docs/secure/17_branding.html) ── */
.color-swatch {
  display: inline-block;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  border: 1px solid var(--fis-border);
  vertical-align: middle;
}
.font-syne { font-family: 'Syne', sans-serif; font-weight: 700; }
.font-dm-sans { font-family: 'DM Sans', sans-serif; font-weight: 400; }
.font-dm-mono { font-family: 'DM Mono', monospace; font-weight: 400; }

/* sidepole.io body typeface candidates (docs/secure/17_branding.html) */
.font-candidate-figtree { font-family: 'Figtree', sans-serif; font-weight: 400; }
.font-candidate-outfit { font-family: 'Outfit', sans-serif; font-weight: 400; }
.font-candidate-plusjakarta { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 400; }

/* sidepole.io warm color scheme preview blocks */
.type-specimen {
  background-color: #FAF6EF;
  border: 1px solid rgba(31,42,36,0.15);
  border-radius: 8px;
  padding: 1.5rem 1.75rem;
}
.type-specimen-label {
  color: #1B4332;
  font-family: 'DM Mono', monospace;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.type-specimen-heading {
  color: #1B4332;
  margin-bottom: 0.75rem;
}
.type-specimen-body {
  color: #1F2A24;
  margin-bottom: 1rem;
}
.type-specimen-quote {
  color: #1F2A24;
  border-left: 3px solid #E9A23B;
  padding-left: 1rem;
  font-style: italic;
  margin: 0;
}
.type-specimen-badge-live {
  display: inline-block;
  background-color: #E8613B;
  color: #FAF6EF;
  font-family: 'DM Mono', monospace;
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.2rem 0.55rem;
  border-radius: 4px;
}
.type-specimen-meta {
  color: #6B7268;
  font-size: 0.85rem;
}
.type-specimen-button {
  display: inline-block;
  background-color: #E9A23B;
  color: #1F2A24;
  font-weight: 600;
  padding: 0.5rem 1.1rem;
  border-radius: 6px;
  text-decoration: none;
}

/* sidepole.info dark-theme full-palette example (docs/secure/17_branding.html) */
.info-specimen {
  background-color: var(--fis-surface);
  border: 1px solid var(--fis-border);
  border-radius: 8px;
  padding: 1.5rem 1.75rem;
}