/**
 * /mdr-content/css/essential.css — central token layer (first CSS layer)
 *
 * The project-wide token base. Included as the FIRST stylesheet on every page (before
 * public.css / tools.css / members.css) via a direct <link>, never @import, so the
 * later area file wins the cascade — sharing the structure while splitting the colour.
 *
 * Holds ONLY tokens that MUST be identical everywhere; layer-specific values (admin
 * lead colours in tools.css, --m-* in members.css, --royal/--tomato in public.css)
 * stay in those files and deliberately override this base because they load later.
 *
 * Defines on :root: the two true global constants --bg (page background) and --card
 * (card white); the graded content-width tokens --w-page / --w-wide / --w-data /
 * --w-form / --w-narrow / --w-mini (each a min() that caps on large screens but yields
 * to a vw fraction on small ones, preventing horizontal scroll); the railed-layout
 * tokens --rail-w / --rail-w-narrow / --rail-w-now / --shell-gap for the shared
 * content-plus-collapsible-menu layout; and the compatibility alias --max-w pointing
 * at --w-page so legacy .container rules keep working. The html.shell-narrow class
 * switches --rail-w-now to the narrow menu width, and content reflows to fill.
 *
 * Plus the central typography tokens: the four font-family roles (--font-sans base
 * body, --font-display Oswald brand, --font-mono, --font-serif article) and a fluid
 * clamp() size scale (--fs-h1..h5, --fs-body/-sm/-tiny/-code) with line heights
 * (--lh-tight/-body) — the single source of the project's type, which element rules
 * and .fs-* utility classes reference instead of scattered font-size/family literals.
 *
 * @package    TaNaSi-MDR
 * @author     Keylam Folker
 * @co-author  Claude (Anthropic)
 * @copyright  2026 TaNaSi
 * @license    proprietary — see RULES.md
 * @link       https://ta-na-si.eu
 * @since      1.0.0
 */

:root {
    /* ── True global constants ──────────────────────────────────────────────────
       Identical everywhere; a divergence here would be a bug, not a design choice.
       Only these two are genuinely the same across all layers today:
         --bg    page background (root + tools = #eef4ee; members = --m-bg)
         --card  card white      (root + tools = #fff; members = --m-card #ffffff)
       All other tokens (--radius, --muted, --border, --green, --accent …) differ
       BETWEEN areas on purpose and stay defined in their own layer files. */
    --bg:        #eef4ee;
    --card:      #fff;

    /* The surface CONTENT actually sits on in the public rendering — the
       content dispatcher's paper-tone reading surface of the content pages.
       The full-page editor paints its writing sheet with this SAME token so
       the editor background can never drift from the real page (WYSIWYG
       background parity between the editor and the content dispatcher). */
    --content-surface: #fcf8f0;

    /* ── Uniform content widths ─────────────────────────────────────────────────
       Replace the ~28 hard-coded wrapper widths that were scattered across the PHP
       pages. Graded by content type, not by arbitrary value. Each is a min() so it
       caps on large screens but yields to a vw fraction on small ones (no h-scroll).

         --w-page    full content width, public pages (was --max-w)
         --w-wide    dashboards, wide editors / database editor
         --w-data    tool/admin default with lists & tables
         --w-form    reading & form pages (single column flow)
         --w-narrow  single actions: login, create dialog, error pages
       ─────────────────────────────────────────────────────────────────────── */
    /* 1760: fills large desktop monitors (e.g. 1980px) better rather than leaving
       wide empty margins. The cap only bites above a ~1913px window (1760 / 0.92);
       smaller laptops keep using the 92vw rule unchanged.
       Previously 1560 (historical value of the old --max-w, with no rationale). */
    --w-page:    min(1760px, 92vw);
    --w-wide:    min(1400px, 92vw);
    --w-data:    min(1100px, 92vw);
    --w-form:    min(1180px, 94vw);   /* reading/form width; use large screens, small ones reflow via 94vw */
    --w-read:    var(--w-form);       /* the READING measure content pages use publicly; the
                                         full-page editor's writing column binds to the SAME
                                         token so line breaks match the real page — retarget in
                                         ONE place if the public reading width ever changes */
    --w-narrow:  min(560px, 94vw);
    --w-mini:    360px;    /* small box/panel; at the call site combine with max-width:100% (box inside one column) */

    /* Railed layout: content on the left + a collapsible menu on the right (shared
       by Admin & Member). Menu width comes from --rail-w-now (wide/narrow); the
       content flexes to fill the rest and aligns — like the header — to the edges
       (28px). html.shell-narrow flips the menu to its narrow width. */
    --rail-w:          260px;   /* holds the longest area label on one line (e.g. "Platform Configuration") */
    --rail-w-narrow:   60px;
    --rail-w-now:      var(--rail-w);
    --shell-gap:       28px;

    /* Compatibility alias: the existing --max-w points at the full page width, so
       the legacy .container rule in public.css (max-width:var(--max-w)) keeps
       working unchanged after the width tokens were introduced. */
    --max-w:     var(--w-page);

    /* ── Typography tokens (font families + fluid size scale) ────────────────────
       ONE central definition of the project's type, replacing the scattered
       font-family strings and the ~289 font-size literals across the area files.
       FAMILIES: --font-sans is the base UI/body face. It leads with the SELF-HOSTED
       'Liberation Sans' (declared in fonts.css), so body text renders IDENTICALLY on
       every OS instead of resolving to each system's own sans (Segoe UI on Windows, a
       metric clone on Linux, …). Liberation Sans is Arial-metric and covers Latin/Greek/
       Cyrillic/Hebrew; scripts it lacks (Arabic, CJK, …) fall to their own Noto faces via
       :lang() (fonts.css). The trailing 'Segoe UI', Arial, sans-serif entries are only a
       fallback during the font-swap or if the woff2 fails to load. (The member area still
       uses its own -apple-system… literal in members.css until it is migrated onto the
       token.) --font-display is the Oswald wordmark/brand face;
       --font-mono the shared monospace stack (retires the stray "Courier New");
       --font-serif the article long-form face: self-hosted 'Gelasio' (metric-compatible
       with Georgia, so the look/layout is kept but shippable) for Latin, with 'Noto
       Serif' catching Cyrillic/Greek and per-language upgrades wired in fonts.css
       (PT Serif for Cyrillic, Noto Serif <script> for non-Latin) via article:lang().
       SIZES: a fluid clamp() scale — grows smoothly with the viewport, no breakpoint
       overrides — grounded on the existing article scale so nothing jumps when the
       old literals are migrated onto it. Consumers reference these (element rules +
       .fs-* utility classes / the Jodit article class set), never raw literals. */
    --font-sans:    'Liberation Sans', 'Segoe UI', Arial, sans-serif;
    --font-display: 'Oswald', sans-serif;
    --font-mono:    ui-monospace, SFMono-Regular, Menlo, Consolas, "Courier New", monospace;
    --font-serif:   'Gelasio', 'Noto Serif', Georgia, "Times New Roman", serif;

    --fs-h1:   clamp(1.4rem, 3vw, 2rem);
    --fs-h2:   clamp(1.2rem, 2.5vw, 1.65rem);
    --fs-h3:   clamp(1.05rem, 2vw, 1.35rem);
    --fs-h4:   clamp(.95rem, 1.8vw, 1.15rem);
    --fs-body: 1rem;
    --fs-h5:   var(--fs-body); /* small heading = body size (semantic alias, no duplicate) */
    --fs-lead: .95rem;   /* emphasised small labels / small titles */
    --fs-md:   .9rem;    /* menu items, rail labels — one step below body */
    --fs-sm:   .85rem;   /* hints, descriptions */
    --fs-xs:   .8rem;    /* footer headings, small meta */
    --fs-tiny: .75rem;   /* small labels */
    --fs-2xs:  .7rem;    /* badges, stat labels */
    --fs-3xs:  .65rem;   /* smallest — badge / stat-label floor */
    --fs-code: var(--fs-sm); /* code / monospace = small size (semantic alias, no duplicate) */

    --lh-tight: 1.25;   /* headings */
    --lh-body:  1.7;    /* body copy */
}

/* Narrow menu → switch --rail-w-now to the narrow value (the admin-head script
   toggles this class on <html>). Content reflows automatically to fill. */
html.shell-narrow { --rail-w-now: var(--rail-w-narrow); }