/*
 * ═══════════════════════════════════════════════════════════════════════
 *  theme_section_dark.css  —  Dark "charcoal" theme for the Document Library
 *  Daralbeida.com · DAB-VIS-CSS-SECT-DARK-001 · v1.0 · May 2026
 *
 *  WHAT THIS IS
 *  ────────────
 *  A drop-in theme that turns any section page into the dark charcoal look of
 *  the DARX dashboards (e.g. DARX_BI_KBI_DASHBOARD). It contains NO component
 *  rules — it only re-declares the --doc-* THEME CONTRACT defined in
 *  webpage_section_generic.css with dark values.
 *
 *  HOW TO USE  (one line, fully reversible)
 *  ────────────────────────────────────────
 *  Link it AFTER the base stylesheet so it wins on source order:
 *      <link rel="stylesheet" href="css/webpage_section_generic.css">
 *      <link rel="stylesheet" href="css/theme_section_dark.css">   ← add / remove
 *
 *  Currently linked by:  /darmaster/01/index.php  and  /darmaster/08/index.php
 *  (the cross-section Document Library / browser). The per-section pages
 *  /02/–/07/ omit it and therefore stay on the light "paper" theme.
 *
 *  HOW TO RE-THEME
 *  ───────────────
 *  Every value lives in the single :root block below. Change a token, save —
 *  the whole page re-paints. To invent another theme (e.g. "midnight"), copy
 *  this file, swap the values, and link that copy instead.
 *
 *  PALETTE SOURCE
 *  ──────────────
 *  Mirrors the dashboard tokens: charcoal #28333A page, blue-tinted glass
 *  cards (rgba 20,40,55), ivory #F6F1E7 text, atlas-gold #B8832A hairlines,
 *  4px radii on cards/controls.
 * ═══════════════════════════════════════════════════════════════════════
 */

:root {
  /* ── Surfaces ──────────────────────────────────────────────────────── */
  --doc-bg:        #28333A;                  /* charcoal page background     */
  --doc-surface:   rgba(20, 40, 55, 0.60);   /* card fill — blue-tinted glass */
  --doc-surface-h: rgba(26, 50, 70, 0.70);   /* card fill on hover            */
  --doc-control:   rgba(26, 77, 109, 0.12);  /* search · segments · summaries */
  --doc-panel:     #1e272d;                  /* opaque dropdown panels        */
  --doc-tint:      var(--doc-bg);            /* fades blend toward charcoal, not white */
  --doc-header-bg: rgba(30, 40, 46, 0.95);   /* frosted control bar           */

  /* ── Text ──────────────────────────────────────────────────────────── */
  --doc-text:       #F6F1E7;                 /* ivory — primary               */
  --doc-text-muted: rgba(246, 241, 231, 0.55);
  --doc-text-faint: rgba(246, 241, 231, 0.30);
  --doc-title:      var(--doc-text);         /* ivory card titles (dashboard style) */

  /* ── Search-match highlight (gold wash + ivory text) ───────────────── */
  --doc-mark-bg: color-mix(in srgb, var(--doc-gold) 32%, transparent);
  --doc-mark-fg: var(--doc-text);

  /* ── Lines + shape ─────────────────────────────────────────────────── */
  --doc-rule:   rgba(184, 131, 42, 0.22);    /* gold hairline                 */
  --doc-radius: 4px;                         /* rounded like the dashboard cards */
}