/* ═══════════════════════════════════════════════════════════════════════
   __darmaster/css/base/tokens.css
   Daralbeida Multi-Entity Platform · v1.0 · 2026-06-03

   Global tokens. NEVER per-entity. The dashboard overrides these via the
   inline <style> tag emitted by darx_load_skin() (step 6 of the cascade).

   Naming convention: every variable starts with a meaningful prefix so
   later overrides at entity / section scope are easy to grep for.

   FONT HISTORY (for revert reference):
   - 2026-06-03 to 2026-06-11: --font-body = 'Literata' (serif);
                               --font-mono = 'JetBrains Mono' (monospace);
                               --font-display = 'Cinzel Decorative' (serif);
                               Roboto (sans) was imported but not used in these tokens.
   - 2026-06-11 onward: --font-body = 'Alegreya' (serif);
                        --font-mono = 'SF Mono (Apple Corporate)' (monospace);
                        --font-display = 'Cinzel Decorative' (serif, brand-locked);
                        SANS-SERIF: replaced Roboto → 'Bahnschrift' (system font).
   ═══════════════════════════════════════════════════════════════════════ */

/* DEPRECATED (2026-06-11): SITEWIDE MONO TRIAL using Comic Mono.
   This was removed in favor of 'SF Mono (Apple Corporate)' per the
   font update. To revert the Comic Mono trial, add:
   @import url('comic_mono.css?v=061102');
   and update --font-mono back to 'JetBrains Mono', 'DM Mono' in :root below. */

/* ── SINGLE SOURCE OF FONTS ─────────────────────────────────────────────────
   The body/sans/mono webfonts are loaded + chosen by the SKIN FONTS SELECTOR,
   NOT here: skin_values.csv `global,font-serif|font-sans|font-mono = <key>`
   (or the skin manager's FONTS tab). darx_load_skin() step 8 resolves each key
   via api/font_catalog.php, emits ONE Google Fonts <link>, and re-emits the
   --font-body/--font-sans/--font-mono variables so the pick wins platform-wide.
   The :root values below are only the DEFAULTS (used until a key is set). The
   wordmark (--font-display) is the exception: Cinzel Decorative, LOCKED and
   self-hosted right here so it never depends on an external load. */

/* ── SELF-HOSTED CINZEL DECORATIVE wordmark (700/900) ──────────────────────
   Loaded HERE because tokens.css is on EVERY platform page (via darx_load_skin
   and the cockpit head), so the brand wordmark renders everywhere with ZERO
   external dependency. The woff2 live at the site-root css/fonts/; url() is
   relative to THIS file (__darmaster/css/base/ → ../../../css/fonts/). */
@font-face{
  font-family:'Cinzel Decorative';font-style:normal;font-weight:700;font-display:swap;
  src:url('../../../css/fonts/cinzeldecorative-700-normal-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Cinzel Decorative';font-style:normal;font-weight:700;font-display:swap;
  src:url('../../../css/fonts/cinzeldecorative-700-normal-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:'Cinzel Decorative';font-style:normal;font-weight:900;font-display:swap;
  src:url('../../../css/fonts/cinzeldecorative-900-normal-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Cinzel Decorative';font-style:normal;font-weight:900;font-display:swap;
  src:url('../../../css/fonts/cinzeldecorative-900-normal-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* ════════════════════════════════════════════════════════════════════════════
   PLATFORM ZOOM (2026-06-26, user "decrease entire platform text by 25%").
   Renders the WHOLE platform at 75% — the equivalent of the user's manual 75%
   browser zoom. Deliberately `zoom`, NOT font-size scaling: it shrinks text + layout
   uniformly AND bypasses the browser's ~14px min-font-size floor (shrinking font-size
   would clamp small text and flatten the hierarchy — the recurring "fonts" complaint).
   Tune the WHOLE platform from this ONE number. (--ui-scale stays the per-skin knob.)
   ════════════════════════════════════════════════════════════════════════════ */
html { zoom: 0.75; }

:root {

  /* ── Brand colours (defaults; entities override) ───────────────────── */
  --gold:                #B8832A;
  --gold-light:          #D4A574;
  --brand-dark:          #1C1410;
  --brand-primary:       #46331E;   /* entity-specific overlay overrides */
  --brand-accent:        #D8A845;
  --mat-color:           #46331E;

  /* ── Surface colours ───────────────────────────────────────────────── */
  /* Page background = a clear tint of the entity's brand (derived), so every
     page reads in its entity colour (blue DARH, green DARM, brown DARX) — like
     the document libraries — not a washed-out near-white. A skin may set
     --bg-color explicitly to override (e.g. DARMASTER = sand #EDE3CE). */
  --bg-color:            color-mix(in srgb, var(--brand-primary) 30%, #FBF7F0);
  --page-bg:             color-mix(in srgb, var(--nav-bg, #16232F) 84%, #ffffff);   /* DEEP entity page bg — SINGLE SOURCE: library/portals/homepages/cockpit all use var(--page-bg) */
  --surface-color:       #FFFFFF;   /* white tile faces, cards          */
  --text-color:          #1C1410;   /* body text                        */
  --link-color:          #B8832A;   /* gold links                       */

  /* ── Navigation chrome (DERIVED from brand; entities/skins may override) ─
     Default = a dark shade of the entity's brand-primary with the brand-accent
     as the gilt. Set --nav-bg / --nav-gold explicitly in a skin to override. */
  --nav-bg:              color-mix(in srgb, var(--brand-primary) 78%, #0b0b0c);
  --nav-gold:            var(--brand-accent);
  --nav-gold-light:      color-mix(in srgb, var(--nav-gold) 68%, #ffffff);
  --nav-text:            rgba(246, 241, 231, 0.55);
  --nav-text-hover:      rgba(246, 241, 231, 0.92);
  --nav-border:          color-mix(in srgb, var(--nav-gold) 24%, transparent);

  /* ── Typography ────────────────────────────────────────────────────── */
  /* Display: Cinzel Decorative (locked for brand wordmark per PROD rules) */
  --font-display:        'Cinzel Decorative', 'Cormorant Garamond', Georgia, serif;
  /* Title font — hero + page titles. Cinzel Decorative by DEFAULT, but CHANGEABLE
     in the skin manager (FONTS → font-title). Separate from --font-display so the
     brand wordmark stays locked while titles can be re-fonted. (2026-06-22, user) */
  --font-title:          'Cinzel Decorative', 'Cormorant Garamond', Georgia, serif;
  /* Body: Alegreya (serif, previously Literata) */
  --font-body:           'Alegreya', Georgia, serif;
  /* Mono: SF Mono Apple Corporate (system font; fallback JetBrains Mono / Monaco) */
  --font-mono:           'SF Mono', -apple-system, 'Monaco', 'JetBrains Mono', monospace;
  /* Sans-serif: Bahnschrift (system font; fallback Segoe UI / Roboto) */
  --font-sans:           'Bahnschrift', 'Segoe UI', 'Roboto', -apple-system, sans-serif;
  --base-size:           16px;
  --scale-ratio:         1.25;
  --wordmark-letter-spacing: 0.10em;
  --title-size:          15px;   /* PAGE-TITLE (h1) size — CSV/skin editable (skin_values: title-size); default until a skin overrides it */

  /* ── INTERFACE SCALE · ONE KNOB (2026-06-22, user) ──────────────────────────
     A single multiplier for ALL interface text + icons across the chrome — the
     toolbars, filter/SET panels, rows, nav tabs, footer. Set --ui-scale in the
     skin manager (SIZING tab) and everything resizes IN STEP, keeping the
     hierarchy. The four UI text steps + the icon box all multiply by it, so one
     value rescales the whole UI. The brand WORDMARK is the deliberate exception
     (it keeps --nav-brand-fs, independent of this knob). */
  --ui-scale:    1;   /* SIZING slider knob · 1 = NORMAL. Scales the WHOLE interface. */
  /* Text steps are PLAIN rem — they scale automatically because the rem base
     itself is --ui-scale × 16px (see html{} below). Don't multiply by --ui-scale
     here too, or the size would scale twice. */
  /* ── ONE SOURCE OF TRUTH (2026-06-24 user) ───────────────────────────────
     The WORDMARK is the only sized literal. Everything else = 50% of it.
     Both ride --ui-scale (the SIZING slider), so NOTHING is a fixed px — slide
     the knob and the whole interface resizes together. */
  --wordmark-fs:   calc(22px * var(--ui-scale, 1));   /* THE source: 22px at scale 1 */
  /* 2026-06-25 (user): REAL, FLOOR-AWARE TEXT HIERARCHY (replaces the flat 0.45 ladder).
     The browser floors sub-~14px text, so a VISIBLE hierarchy must sit at/above 14px and
     step UPWARD (titles bigger) — label/micro are differentiated by weight/case, not size
     (they'd floor to ~14px anyway). All scale-driven by the --ui-scale knob; the wordmark
     (22px) stays the single dominant element. This is the one platform size system. */
  --ui-fs-display: calc(19px * var(--ui-scale, 1));   /* hero / page titles */
  --ui-fs-title:   calc(16px * var(--ui-scale, 1));   /* section / card titles */
  --ui-fs-value:   calc(14px * var(--ui-scale, 1));   /* body · values · buttons · filenames (at the ~14px floor) */
  --ui-fs-label:   calc(13px * var(--ui-scale, 1));   /* captions · column heads (weight/case-differentiated) */
  --ui-fs-micro:   calc(12px * var(--ui-scale, 1));   /* chips · badges */
  /* ONE SOURCE for every interactive toolbar control's text weight (dropdowns,
     collapse/expand, search, count-info) — so they ALL look identical. Change
     this one value to re-weight them together. 2026-06-24 user. */
  --ctrl-fw:       400;   /* = the nav-tab label weight (.darx-nav-label), so controls match "LIBRARY" */
  /* Icons are px (not rem) so they don't follow the rem base — scale explicitly. */
  --ui-icon:     1.6rem;      /* chrome icon box — rem-based so it scales with the SAME base as text (stays in sync) */

  /* ── TYPE SCALE · 4 LEVELS · ONE SOURCE  (2026-06-16, user) ─────────────
     The platform's four text "levels". Each level is a BUNDLE of font / size /
     weight / spacing / case / colour. An element wears a level via the matching
     class (.t-h1 … .t-h4, defined further down). Re-tune a level HERE and every
     element wearing it updates platform-wide — one knob per level, by design.
       L1  red     display title   — the big brand header (hero / main header)
       L2  green   caption/eyebrow — section captions + subtitle  (mono, caps)
       L3  blue    label           — small labels / tags          (mono, caps)
       L4  yellow  data / number   — figures & counts             (mono, bold) */
  /* L1 — display title (red) */
  --t-h1-font:    var(--font-display);
  --t-h1-size:    var(--ui-fs-display);
  --t-h1-weight:  700;
  --t-h1-spacing: 0.06em;
  --t-h1-case:    capitalize;
  --t-h1-color:   color-mix(in srgb, var(--nav-gold) 38%, #fff);
  /* L2 — caption / eyebrow (green) */
  --t-h2-font:    var(--font-mono);
  --t-h2-size:    var(--ui-fs-value);
  --t-h2-weight:  700;
  --t-h2-spacing: 0.22em;
  --t-h2-case:    uppercase;
  --t-h2-color:   var(--nav-gold, #C9BBA0);
  /* L3 — label (blue) */
  --t-h3-font:    var(--font-mono);
  --t-h3-size:    var(--ui-fs-label);
  --t-h3-weight:  700;
  --t-h3-spacing: 0.14em;
  --t-h3-case:    uppercase;
  --t-h3-color:   var(--nav-gold, #C9BBA0);
  /* L4 — data / number (yellow) */
  --t-h4-font:    var(--font-mono);
  --t-h4-size:    var(--ui-fs-value);
  --t-h4-weight:  800;
  --t-h4-spacing: 0;
  --t-h4-case:    none;
  --t-h4-color:   color-mix(in srgb, var(--nav-gold) 58%, #fff);

  /* ── Spacing (driven by padding-scale via the dashboard) ───────────── */
  --space-compact:       6px;
  --space-normal:        12px;
  --space-spacious:      20px;
  --space:               var(--space-normal);   /* dashboard remaps this */

  /* ── Gaps (driven by gap-scale via the dashboard) ──────────────────── */
  --gap-tight:           3px;
  --gap-normal:          6px;
  --gap-loose:           12px;
  --gap:                 var(--gap-normal);

  /* ── Shadows (driven by shadow-intensity via the dashboard) ────────── */
  --shadow-none:         none;
  --shadow-subtle:       0 2px 6px rgba(20, 10, 4, 0.18);
  --shadow-strong:       0 6px 18px rgba(20, 10, 4, 0.32);
  --shadow:              var(--shadow-subtle);

  /* ── Corners (square by default, dashboard can override) ───────────── */
  --radius:              0;
}

/* ── Scrollbar gutter — reserve space so content never shifts when a
   scrollbar appears or disappears (navigating between short and tall pages). */
html { scrollbar-gutter: stable; background: var(--page-bg);
  /* ONE KNOB: rem base = --ui-scale × 9.6px, so EVERY rem-based size (spacing,
     icons) follows the SIZING slider. Fonts follow it too via --wordmark-fs /
     --ui-fs-* (calc on --ui-scale). So the slider now scales the WHOLE UI. */
  font-size: calc(var(--ui-scale, 1) * 9.6px); }

/* ── Box-sizing reset ──────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

/* ── Body defaults ────────────────────────────────────────────────────── */
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-body);
  font-size:   var(--base-size);
  color:       var(--text-color);
  background:  var(--page-bg);   /* DEEP entity page ground — SINGLE SOURCE. Every skinned page
                                    inherits this; surfaces that need a light field use the
                                    --bg-color TOKEN explicitly (cards/panels), not the body. */
}

/* ── PAGE TITLE — ONE rule, ALL titles (2026-06-16, user) ──────────────────
   Every page TITLE takes its FONT + SIZE from the CSV / skin, in one place:
     · font  = var(--font-sans)  (the Sans pick in the skin's FONTS tab)
     · size  = var(--title-size) (Typography tab; skin_values: title-size)
   This is the TITLE — NOT the brand WORDMARK. The wordmark (nav .darx-nav-home)
   stays Cinzel Decorative (var(--font-display), brand-locked) and is untouched.
   !important so this single source wins over every page's local h1/.portal-title
   declaration regardless of load order — change the look here (or in the CSV)
   and it propagates to all and any titles platform-wide. */
/* Page titles + hero now ride the LADDER (--ui-fs-display) and wear --font-title
   (Cinzel Decorative by default, changeable in the skin's FONTS tab). 2026-06-22 user. */
h1, .portal-title {
  font-family: var(--font-title) !important;
  font-size:   var(--ui-fs-display) !important;
}
/* Hero + section main header = the same display rung + title font. */
.home-hero h1        { font-family: var(--font-title) !important; font-size: var(--ui-fs-display) !important; }
.section-main-header { font-family: var(--section-header-font, var(--font-title)) !important; font-size: var(--ui-fs-display) !important; }

/* ── TYPE-SCALE CLASSES — wear a level on ANY element ───────────────────────
   .t-h1 … .t-h4 paint an element with the matching level's bundle (the --t-hN-*
   tokens above). They work on a <span>, <p>, <a> or a real heading alike, so
   they never disturb the page's semantic outline. !important on font + size so
   a level always wins — including over the page-title lock above. To restyle a
   level, edit its --t-hN-* tokens (one place) and every .t-hN element follows. */
.t-h1 { font-family: var(--t-h1-font) !important; font-size: var(--t-h1-size) !important; font-weight: var(--t-h1-weight); letter-spacing: var(--t-h1-spacing); text-transform: var(--t-h1-case); color: var(--t-h1-color); }
.t-h2 { font-family: var(--t-h2-font) !important; font-size: var(--t-h2-size) !important; font-weight: var(--t-h2-weight); letter-spacing: var(--t-h2-spacing); text-transform: var(--t-h2-case); color: var(--t-h2-color); }
.t-h3 { font-family: var(--t-h3-font) !important; font-size: var(--t-h3-size) !important; font-weight: var(--t-h3-weight); letter-spacing: var(--t-h3-spacing); text-transform: var(--t-h3-case); color: var(--t-h3-color); }
.t-h4 { font-family: var(--t-h4-font) !important; font-size: var(--t-h4-size) !important; font-weight: var(--t-h4-weight); letter-spacing: var(--t-h4-spacing); text-transform: var(--t-h4-case); color: var(--t-h4-color); }