/*
 * ═══════════════════════════════════════════════════════════════════════
 *  darx_docs.css  —  Bridge Stylesheet for Standalone HTML Documents
 *  Daralbeida.com  ·  DAB-VIS-CSS-DOCS-BRIDGE-001  ·  v1.0  ·  May 2026
 *
 *  ROLE
 *      One <link> entry on a standalone HTML doc pulls in:
 *         · darx_tokens.css      (which @imports fonts.css)
 *         · A small set of LEGACY token aliases used historically by
 *           the HTML corpus at _devt/11/0102/html/ (e.g. --deep-blue,
 *           --atlas-gold, --sand, --olive-green) so a file that swaps
 *           a fonts.css <link> for a darx_docs.css <link> picks up
 *           every shared token AND every shared font without needing
 *           any other change.
 *
 *  USAGE on a standalone HTML doc
 *      <link rel="stylesheet"
 *            href="/darmaster/css/darx_docs.css?v=YYYYMMDD">
 *
 *  PROPERTY PRECEDENCE
 *      The aliases declared at the bottom of this file use the same
 *      CSS-variable names that the HTML files' local :root{} blocks
 *      have been using for over a year. Because the HTML files'
 *      <style> blocks load AFTER this stylesheet, any divergent
 *      local value WINS over the alias here on collision. The bridge
 *      is therefore non-breaking by design.
 *
 *  NO MAGIC NUMBERS
 *      Every alias value references either a token defined upstream
 *      in darx_tokens.css or, where the canonical file does not have
 *      a matching token, the historical literal value that the HTML
 *      corpus has been using consistently. Either way, ONE place to
 *      change the value.
 *
 *  CACHE-BUSTING
 *      Use the ?v=YYYYMMDD pattern that the rest of the site uses
 *      so updates propagate predictably on hard refresh.
 *
 *  AUDIT REFERENCE
 *      Created as part of the styles consistency audit documented
 *      at _devt/_audit/html_styles_report_202605301815.txt
 *      (Section 7.1, "The Bridge Stylesheet, darx_docs.css").
 * ═══════════════════════════════════════════════════════════════════════
 */


/* ── 1. UPSTREAM IMPORTS ──────────────────────────────────────────────── */
/* Token file pulls in every shared color, type, spacing, and chrome
   variable. Token file ITSELF @imports fonts.css so we don't need a
   second @import here. Cache-busting belongs on the <link>, not on the
   @import (browsers handle @import cache the same as the parent file). */
@import url("darx_tokens.css");


/* ── 2. LEGACY HTML-CORPUS TOKEN ALIASES ──────────────────────────────── */
/* Names declared here are the historical convention used across the 75
   HTML files under _devt/11/0102/html/. Values map to canonical tokens
   from darx_tokens.css where they exist; where they do not, the value
   is the literal hex that the HTML corpus has been using consistently.

   Each alias is a one-way bridge: an HTML file can keep referencing
   --deep-blue or --atlas-gold and get a working value. Any local :root{}
   override in the file's own <style> block wins because it loads after
   this file. */
:root {

  /* Brand color aliases — historical names used by ~40 HTML files.
     --deep-blue is the HTML corpus's name for the brand navy; the
     canonical token file has it as --ocean (#4A7C9E) at a different
     value, so we use the literal here to preserve historical rendering. */
  --deep-blue:    #1A4D6D;
  --atlas-gold:   var(--gold, #B8832A);    /* canonical token, alias name  */
  --sand:         #EDE3CE;                 /* HTML corpus literal          */
  --olive-green:  var(--olive, #6B7F4A);   /* canonical alias              */
  --gold-dark:    #8a5f1a;                 /* derived shade, no canonical  */
  --blue-mid:     var(--ocean, #4A7C9E);   /* canonical alias              */
  --ocean-blue:   var(--ocean, #4A7C9E);   /* alternate alias              */

  /* Functional tones used in card-style HTML docs. */
  --bg-card:      #FFFFFF;
  --text:         var(--charcoal, #2C3539);
  --text-light:   #5a6a72;
  --border-card:  rgba(26, 77, 109, 0.10);

  /* Light accent washes — used as section-strip backgrounds in many docs. */
  --warn-bg:      rgba(184, 131, 42, 0.08);
  --red-bg:       rgba(196, 133, 106, 0.10);
  --green-bg:     rgba(107, 127, 74, 0.08);
  --blue-bg:      rgba(26,  77, 109, 0.06);

  /* Body / page fallback. Most HTML docs set --bg to ivory at the top of
     their local :root{} block; this is the safety net for files that
     don't and rely on the bridge to define it. */
  --bg:           var(--ivory, #F6F1E7);
}


/* ── 3. UTILITIES (entirely optional) ─────────────────────────────────── */
/* A tiny set of utility classes that future HTML docs can adopt for
   consistency. NONE of these are emitted as element selectors so
   they don't accidentally restyle existing markup in files that just
   load this bridge for the variables. */

.darx-doc-page {
  background: var(--bg, var(--ivory, #F6F1E7));
  color: var(--text, var(--charcoal, #2C3539));
  font-family: var(--font-sans, 'Inter', sans-serif);
  font-size: var(--ui-fs-value);
  line-height: 1.55;
}

.darx-doc-page .darx-doc-headline {
  font-family: var(--font-title, 'Bricolage Grotesque', sans-serif);
  font-weight: 600;
  color: var(--deep-blue);
  letter-spacing: -0.02px;
}

.darx-doc-page .darx-doc-meta {
  font-family: var(--font-mono, 'Victor Mono', monospace);
  font-size: var(--ui-fs-label);
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--text-light);
}


/* ── 4. END ───────────────────────────────────────────────────────────── */
/* The bridge is intentionally small. Adding more to it should be a
   discussed change, not a quiet evolution, because every HTML doc
   inherits it. Component CSS belongs in _devt/css/elements/ instead. */