/* ============================================================
   SIMPAISA DESIGN SYSTEM — see DESIGN.md for full rationale
   Updated: 2026-04-16
   Aesthetic: Refined utilitarian — authority without ornament
   Colours: aligned to Simpaisa Brand Book (primary #243e90, accent #0156fc)
   Typography: Plus Jakarta Sans + Instrument Sans (upgrade from brand Poppins)
============================================================ */

/* Instrument Sans for body text */
@import url('https://fonts.googleapis.com/css2?family=Instrument+Sans:ital,wght@0,400;0,500;0,600;1,400&display=swap');

/* ============================================================
   COLOUR TOKENS
   Brand Book palette:
     #0156fc — electric blue (primary brand)
     #243e90 — deep navy (secondary brand)
     #1E1E1E — near black
     #dddddd — light grey
     #eaeaea — very light grey
============================================================ */
:root {
  --md-primary-fg-color:              #243e90;
  --md-primary-fg-color--light:       #1a2d7a;
  --md-primary-fg-color--dark:        #0D1117;
  --md-accent-fg-color:               #0156fc;
  --md-accent-fg-color--transparent:  #0156fc1a;
  --md-typeset-font-size:             1.0rem;
}

[data-md-color-scheme="slate"] {
  --md-default-bg-color:             #0D1117;
  --md-accent-fg-color:              #4d87fd;
  --md-accent-fg-color--transparent: #4d87fd1a;
}

/* ============================================================
   BASE
============================================================ */
html { font-size: 125%; }

/* Body: Instrument Sans */
body, .md-typeset {
  font-family: 'Instrument Sans', system-ui, sans-serif;
  line-height: 1.75;
}

/* Headings: Plus Jakarta Sans */
.md-typeset h1,
.md-typeset h2,
.md-typeset h3,
.md-typeset h4,
.md-typeset h5,
.md-typeset h6,
.md-header__title,
.md-nav__title {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
}

.md-typeset h1 { font-weight: 800; letter-spacing: -0.3px; }
.md-typeset h2 { font-weight: 700; letter-spacing: -0.2px; }
.md-typeset h3,
.md-typeset h4 { font-weight: 700; }

/* ============================================================
   NAV AND HEADER
============================================================ */
.md-header { background-color: #243e90; }
.md-tabs   { background-color: #1a2d7a; }

.md-header__title {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-weight: 700;
  font-size: 14px;
}

.md-tabs__link {
  font-family: 'Instrument Sans', system-ui, sans-serif;
  font-size: 12.5px;
  font-weight: 500;
}

/* ============================================================
   SIDEBAR
============================================================ */
.md-nav__item--active > .md-nav__link {
  color: #0156fc;
  font-weight: 600;
}

.md-nav__link {
  font-family: 'Instrument Sans', system-ui, sans-serif;
  font-size: 13px;
}

.md-nav__title {
  font-size: 10px;
  letter-spacing: 0.07em;
  font-weight: 700;
  text-transform: uppercase;
}

/* ============================================================
   CONTENT
============================================================ */
.md-grid { max-width: 1600px; }

@media screen and (min-width: 76.25em) {
  .md-content { max-width: none; }
  .md-sidebar--secondary { margin-left: auto; }
}

/* Links */
.md-content a { color: #0156fc; }
.md-content a:hover { color: #0040cc; }

/* ============================================================
   TABLES
============================================================ */
.md-typeset table:not([class]) {
  border: 1px solid rgba(0,0,0,0.09);
  border-radius: 8px;
  overflow: hidden;
  font-size: 13.5px;
}

.md-typeset table:not([class]) th {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  background: rgba(36,62,144,0.06);
  padding: 10px 16px;
}

.md-typeset table:not([class]) td {
  padding: 9px 16px;
  vertical-align: top;
}

[data-md-color-scheme="slate"] .md-typeset table:not([class]) th {
  background: rgba(255,255,255,0.05);
}

/* ============================================================
   CODE
============================================================ */
.md-typeset code {
  background: rgba(36,62,144,0.07);
  border: 1px solid rgba(36,62,144,0.1);
  border-radius: 4px;
  padding: 1px 5px;
  font-size: 0.85em;
  color: #0156fc;
}

[data-md-color-scheme="slate"] .md-typeset code {
  background: rgba(255,255,255,0.07);
  border-color: rgba(255,255,255,0.1);
  color: #4d87fd;
}

.md-typeset pre code {
  background: none;
  border: none;
  padding: 0;
  color: inherit;
}

/* Syntax highlight — light mode: dark colours on light grey background */
.md-typeset .highlight span { color: #1A1A2A; }

/* Comments */
.md-typeset .highlight .c,
.md-typeset .highlight .c1,
.md-typeset .highlight .cm,
.md-typeset .highlight .cp { color: #6B7280 !important; font-style: italic; }

/* Strings */
.md-typeset .highlight .s,
.md-typeset .highlight .s1,
.md-typeset .highlight .s2,
.md-typeset .highlight .sb,
.md-typeset .highlight .sc { color: #0F6B39 !important; }

/* Keywords */
.md-typeset .highlight .k,
.md-typeset .highlight .kd,
.md-typeset .highlight .kn,
.md-typeset .highlight .kr { color: #243e90 !important; font-weight: 600; }

/* Functions and names */
.md-typeset .highlight .nf,
.md-typeset .highlight .nc,
.md-typeset .highlight .nb { color: #0156fc !important; }

/* Numbers */
.md-typeset .highlight .mi,
.md-typeset .highlight .mf { color: #9A3412 !important; }

/* Dark mode — restore vivid colours on dark background */
[data-md-color-scheme="slate"] .md-typeset .highlight .c,
[data-md-color-scheme="slate"] .md-typeset .highlight .c1,
[data-md-color-scheme="slate"] .md-typeset .highlight .cm  { color: #94A3B8 !important; }
[data-md-color-scheme="slate"] .md-typeset .highlight .s,
[data-md-color-scheme="slate"] .md-typeset .highlight .s1,
[data-md-color-scheme="slate"] .md-typeset .highlight .s2  { color: #86EFAC !important; }
[data-md-color-scheme="slate"] .md-typeset .highlight .k,
[data-md-color-scheme="slate"] .md-typeset .highlight .kd  { color: #93C5FD !important; font-weight: 600; }
[data-md-color-scheme="slate"] .md-typeset .highlight .nf,
[data-md-color-scheme="slate"] .md-typeset .highlight .nc  { color: #4d87fd !important; }

/* ============================================================
   ADMONITIONS
============================================================ */
.md-typeset .admonition-title,
.md-typeset summary {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* ============================================================
   TOC — right-side column
============================================================ */

/* Right sidebar: fixed position, border-left separator */
.md-sidebar--secondary {
  border-left: 1px solid rgba(0,0,0,0.08);
  background: var(--md-default-bg-color, #F9F8F7);
}

[data-md-color-scheme="slate"] .md-sidebar--secondary {
  border-left-color: rgba(255,255,255,0.07);
}

/* "On this page" title */
.md-nav--secondary > .md-nav__title {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #64748B;
  padding: 0 0 8px 0;
  border-bottom: none;
  box-shadow: none;
}

/* TOC links */
.md-nav--secondary .md-nav__link {
  font-family: 'Instrument Sans', system-ui, sans-serif;
  font-size: 12px;
  color: #64748B;
  padding: 3px 0 3px 10px;
  border-left: 2px solid transparent;
  margin-left: 0;
  border-radius: 0;
  transition: color 0.15s, border-color 0.15s;
}

.md-nav--secondary .md-nav__link:hover {
  color: #0156fc;
  border-left-color: rgba(1,86,252,0.3);
}

.md-nav--secondary .md-nav__link--active {
  color: #0156fc;
  font-weight: 600;
  border-left-color: #0156fc;
}

[data-md-color-scheme="slate"] .md-nav--secondary .md-nav__link {
  color: #94A3B8;
}

[data-md-color-scheme="slate"] .md-nav--secondary .md-nav__link--active {
  color: #4d87fd;
  border-left-color: #4d87fd;
}

/* ============================================================
   SEARCH
============================================================ */
.md-search__input {
  font-family: 'Instrument Sans', system-ui, sans-serif;
  font-size: 13px;
}

/* ============================================================
   FOOTER
============================================================ */
.md-footer { background: #243e90; }