:root {
  --scalar-header-height: 50px;
  --scalar-sidebar-width: 280px;
  --scalar-container-width: 680px;
  --scalar-toc-width: 280px;

  --scalar-card-icon-width: 40px;
  --scalar-card-icon-height: 40px;
  --scalar-card-icon-diameter: 20px;
  --scalar-card-padding: 16px;
  --scalar-card-inter-element-gap: 4px;
  --scalar-toc-indent-unit: 16px;

  --scalar-row-gap: 16px;
  --scalar-extra-bold: 700;
  --scalar-heading-spacing: 44px;
  --scalar-block-spacing: 12px;
  --scalar-font-size-1: 24px;

  --scalar-text-decoration: underline;
  --scalar-text-decoration-hover: underline;
}

/* ═══════════════════════════════════════════════════════════════════════════
   COINQUANT LIGHT MODE (inverted from the dark-first app palette)
   ═══════════════════════════════════════════════════════════════════════════ */
.light-mode {
  /* Backgrounds — CoinQuant light end of the black-* scale */
  --scalar-background-1: #ffffff;       /* black-00 */
  --scalar-background-2: #f3f5ff;       /* black-100 */
  --scalar-background-3: #e2e6fd;       /* black-200 */
  --scalar-background-accent: #5854FF1A;

  /* Text — CoinQuant dark end of the black-* scale */
  --scalar-color-1: #0a090f;            /* black-1000 */
  --scalar-color-2: #44455f;            /* black-500 */
  --scalar-color-3: #61637d;            /* black-450 */

  /* Accent — primary-500 (ion purple) */
  --scalar-color-accent: #5854FF;

  /* Borders — black-300 */
  --scalar-border-color: #aeb1ce;

  /* Status colors — exact CoinQuant accents */
  --scalar-color-green: #3df57b;        /* accent-green */
  --scalar-color-red: #EF4444;          /* accent-red */
  --scalar-color-yellow: #ffbf00;       /* accent-amber */
  --scalar-color-blue: #3FA4FF;         /* accent-blue */
  --scalar-color-orange: #FF7022;       /* accent-orange */
  --scalar-color-purple: #C478FF;       /* accent-lilac */

  /* Links — primary-500 / primary-700 */
  --scalar-link-color: #5854FF;
  --scalar-link-color-hover: #3D39CC;

  /* Buttons — primary-500 */
  --scalar-button-1: #5854FF;
  --scalar-button-1-hover: #4A46E6;     /* primary-600 */
  --scalar-button-1-color: #ffffff;

  /* Tooltips */
  --scalar-tooltip-background: #0a090f; /* black-1000 */
  --scalar-tooltip-color: #fcfcff;      /* black-50 */

  /* Alerts */
  --scalar-color-alert: #ffbf00;        /* accent-amber */
  --scalar-color-danger: #EF4444;       /* accent-red */
  --scalar-background-alert: #ffbf0016;
  --scalar-background-danger: #EF444416;

  /* Sidebar — CoinQuant light scale */
  --scalar-sidebar-background-1: #ffffff;    /* black-00 */
  --scalar-sidebar-color-1: #0a090f;         /* black-1000 */
  --scalar-sidebar-color-2: #44455f;         /* black-500 */
  --scalar-sidebar-border-color: #e2e6fd;    /* black-200 */
  --scalar-sidebar-item-hover-background: #f3f5ff;  /* black-100 */
  --scalar-sidebar-item-hover-color: #0a090f;
  --scalar-sidebar-item-active-background: #e2e6fd; /* black-200 */
  --scalar-sidebar-color-active: #5854FF;    /* primary-500 */
  --scalar-sidebar-indent-border: #e2e6fd;
  --scalar-sidebar-indent-border-hover: #aeb1ce;    /* black-300 */
  --scalar-sidebar-indent-border-active: #5854FF;
  --scalar-sidebar-search-background: #f3f5ff;
  --scalar-sidebar-search-color: #8183a0;    /* black-400 */
  --scalar-sidebar-search-border-color: #aeb1ce;
}

/* ═══════════════════════════════════════════════════════════════════════════
   COINQUANT DARK MODE (matches app.coinquant.ai exactly)
   ═══════════════════════════════════════════════════════════════════════════ */
.dark-mode {
  /* Backgrounds — exact CoinQuant surface tokens */
  --scalar-background-1: #0a090f;       /* black-1000 / surface-background */
  --scalar-background-2: #15141b;       /* black-900  / surface-main */
  --scalar-background-3: #1e1d26;       /* black-800  / surface-secondary */
  --scalar-background-accent: #5854FF1F;

  /* Text — exact CoinQuant text tokens */
  --scalar-color-1: #fcfcff;            /* black-50  / text-primary */
  --scalar-color-2: #aeb1ce;            /* black-300 / text-secondary */
  --scalar-color-3: #8183a0;            /* black-400 / text-muted */

  /* Accent — primary-300 */
  --scalar-color-accent: #818CF8;

  /* Borders — black-700 / stroke-default */
  --scalar-border-color: #262532;

  /* Status colors — exact CoinQuant accents */
  --scalar-color-green: #3df57b;        /* accent-green */
  --scalar-color-red: #EF4444;          /* accent-red */
  --scalar-color-yellow: #ffbf00;       /* accent-amber */
  --scalar-color-blue: #3FA4FF;         /* accent-blue */
  --scalar-color-orange: #FF7022;       /* accent-orange */
  --scalar-color-purple: #C478FF;       /* accent-lilac */

  /* Links — primary-200 / primary-100 */
  --scalar-link-color: #A5B4FC;
  --scalar-link-color-hover: #D5D4FF;

  /* Buttons — black-200 / button-primary */
  --scalar-button-1: #e2e6fd;
  --scalar-button-1-hover: #fcfcff;     /* button-primaryHover */
  --scalar-button-1-color: #0a090f;     /* text-black */

  /* Tooltips */
  --scalar-tooltip-background: #1e1d26; /* black-800 */
  --scalar-tooltip-color: #fcfcff;      /* black-50 */

  /* Alerts */
  --scalar-color-alert: #FF7022;        /* accent-orange */
  --scalar-color-danger: #EF4444;       /* accent-red */
  --scalar-background-alert: #FF702220;
  --scalar-background-danger: #EF444420;

  /* Sidebar — CoinQuant surface scale */
  --scalar-sidebar-background-1: #15141b;    /* black-900 / surface-main */
  --scalar-sidebar-color-1: #fcfcff;         /* text-primary */
  --scalar-sidebar-color-2: #aeb1ce;         /* text-secondary */
  --scalar-sidebar-border-color: #262532;    /* stroke-default */
  --scalar-sidebar-item-hover-background: #262532;  /* surface-highlight */
  --scalar-sidebar-item-hover-color: #fcfcff;
  --scalar-sidebar-item-active-background: #262532;
  --scalar-sidebar-color-active: #818CF8;    /* primary-300 */
  --scalar-sidebar-indent-border: #262532;
  --scalar-sidebar-indent-border-hover: #2c2b3a;    /* black-600 / stroke-subtle */
  --scalar-sidebar-indent-border-active: #818CF8;
  --scalar-sidebar-search-background: #1e1d26;       /* surface-secondary */
  --scalar-sidebar-search-color: #8183a0;             /* text-muted */
  --scalar-sidebar-search-border-color: #262532;
}

/* ═══════════════════════════════════════════════════════════════════════════
   DOCUMENT HEADER
   ═══════════════════════════════════════════════════════════════════════════ */
.light-mode .t-doc__header {
  --scalar-header-background-1: #ffffff;
  --scalar-header-border-color: #e2e6fd;     /* black-200 */
  --scalar-header-color-1: #0a090f;
  --scalar-header-color-2: #44455f;          /* black-500 */
  --scalar-header-background-toggle: #61637d; /* black-450 */
  --scalar-header-call-to-action-color: #5854FF;
}

.dark-mode .t-doc__header {
  --scalar-header-background-1: #0a090f;
  --scalar-header-border-color: #262532;
  --scalar-header-color-1: #fcfcff;
  --scalar-header-color-2: #aeb1ce;
  --scalar-header-background-toggle: #8183a0;
  --scalar-header-call-to-action-color: #e2e6fd; /* button-primary */
}

/* ═══════════════════════════════════════════════════════════════════════════
   CODE BLOCKS
   ═══════════════════════════════════════════════════════════════════════════ */
.light-mode pre,
.light-mode code {
  background-color: #f3f5ff;             /* black-100 */
  border: 1px solid #e2e6fd;             /* black-200 */
}

.dark-mode pre,
.dark-mode code {
  background-color: #15141b;             /* black-900 / surface-main */
  border: 1px solid #262532;             /* stroke-default */
}

/* ═══════════════════════════════════════════════════════════════════════════
   HTTP METHOD BADGES — CoinQuant accent colors
   ═══════════════════════════════════════════════════════════════════════════ */
.light-mode .http-method-get { background-color: #3df57b; color: #0a090f; }
.light-mode .http-method-post { background-color: #3FA4FF; color: #ffffff; }
.light-mode .http-method-put { background-color: #ffbf00; color: #0a090f; }
.light-mode .http-method-delete { background-color: #EF4444; color: #ffffff; }

.dark-mode .http-method-get { background-color: #3df57b; color: #0a090f; }
.dark-mode .http-method-post { background-color: #3FA4FF; color: #0a090f; }
.dark-mode .http-method-put { background-color: #ffbf00; color: #0a090f; }
.dark-mode .http-method-delete { background-color: #EF4444; color: #0a090f; }