rustio-admin 0.24.0

/* ============================================================
 * rustio-admin / tokens / typography
 *
 *   === Tokens — typography ===
 *
 * Multilingual family stacks + a consistent size scale.
 *
 *   Latin UI         → Geist (primary), Inter (fallback), Plex Sans
 *   Latin extended   → Inter covers Latin-ext / Cyrillic / Greek /
 *                      Vietnamese under one variable file
 *   Arabic           → Noto Naskh Arabic (primary, humanist body),
 *                      Tajawal (geometric accent / fallback)
 *   Mono             → Geist Mono
 *   Thai             → Noto Sans Thai      (auto-loaded by unicode-range)
 *   Devanagari       → Noto Sans Devanagari (auto-loaded by unicode-range)
 *   Japanese         → Noto Sans JP        (selected by `:lang(ja)`)
 *   Korean           → Noto Sans KR        (selected by `:lang(ko)`)
 *   Simpl. Chinese   → Noto Sans SC        (selected by `:lang(zh)`)
 *
 * Han Unification: Japanese Kanji / Simplified Chinese Hanzi /
 * Traditional Hanzi share U+4E00-9FFF. Mixing them in a single
 * global fallback chain would render Chinese content with Japanese
 * shapes (or vice versa). Avoid this by leaving CJK out of
 * `--rio-font-sans` and selecting via `:lang()` in
 * base/typography-i18n.css.
 *
 * The size scale `--rio-fs-xs … --rio-fs-display` is the canonical
 * ladder; component styles resolve through it. Adding a new size
 * belongs in CHANGELOG.md.
 *
 * @font-face declarations live in:
 *   - base/typography.css      → Geist, Geist Mono, Tajawal, Naskh, Inter
 *   - base/typography-i18n.css → Thai, Devanagari, Noto Sans JP/KR/SC
 * ============================================================ */

:root {
  /* Latin UI — Geist leads (the framework's identity), Inter is the
   * real second-tier fallback with full Latin-ext / Cyrillic / Greek
   * / Vietnamese coverage under one variable file. Thai +
   * Devanagari sit further down the chain so any Thai / Devanagari
   * character on a Latin-themed page renders correctly without a
   * `lang` tag; their `unicode-range` filters in
   * base/typography-i18n.css keep the download conditional. */
  --rio-font-sans:
    "Geist",
    "Inter",
    "Noto Sans Thai",
    "Noto Sans Devanagari",
    "IBM Plex Sans",
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    "Helvetica Neue",
    Arial,
    sans-serif;

  /* Arabic UI — compact admin surfaces (buttons, navbars, sidebar
   * labels, table cells, badges, form labels). Noto Naskh Arabic
   * is the default reading face across the framework — humanist,
   * generous x-height, calm for long reading. Tajawal is retained
   * for selective geometric display use (promote it with the
   * `.rio-arabic-display` utility class). */
  --rio-font-arabic:
    "Noto Naskh Arabic",
    "Tajawal",
    system-ui,
    sans-serif;

  /* Arabic body — long-form copy, descriptions, settings/help pages.
   * Same priority as the UI token; line-height + size adjustments
   * applied via base/typography.css's `:lang(ar)` rules. */
  --rio-font-arabic-body:
    "Noto Naskh Arabic",
    "Tajawal",
    serif;

  /* Code — Geist Mono, then JetBrains/Plex Mono, then platform mono. */
  --rio-font-mono:
    "Geist Mono",
    "JetBrains Mono",
    "IBM Plex Mono",
    ui-monospace,
    SFMono-Regular,
    Menlo,
    Consolas,
    "Liberation Mono",
    monospace;

  /* --- Locale-gated CJK stacks ---------------------------------- *
   * Applied only when an element carries `lang="ja|ko|zh|zh-CN|
   * zh-Hans"`, via base/typography-i18n.css. System fallbacks
   * (Hiragino, Yu Gothic, PingFang, Malgun, Apple SD Gothic Neo)
   * keep CJK content readable on the OS layer while Noto downloads
   * or on networks where the woff2 fetch fails. */
  --rio-font-japanese:
    "Noto Sans JP",
    "Hiragino Kaku Gothic ProN",
    "Yu Gothic UI",
    "Meiryo",
    sans-serif;

  --rio-font-korean:
    "Noto Sans KR",
    "Apple SD Gothic Neo",
    "Malgun Gothic",
    sans-serif;

  --rio-font-chinese:
    "Noto Sans SC",
    "PingFang SC",
    "Microsoft YaHei",
    sans-serif;

  /* Thai + Devanagari are also available as standalone tokens for
   * components that want to pin the family explicitly; everyday
   * pages get them automatically via --rio-font-sans + the
   * unicode-range gate on their @font-face. */
  --rio-font-thai:
    "Noto Sans Thai",
    "Sukhumvit Set",
    "Leelawadee UI",
    sans-serif;

  --rio-font-devanagari:
    "Noto Sans Devanagari",
    "Hindi Sangam MN",
    "Nirmala UI",
    sans-serif;

  /* Size scale — rem-based, 16px html root.
   * v0.16.0 — 16px is now the floor for any non-micro text. Sidebar,
   * buttons, table cells all sit at 16px so an eight-hour clinical
   * shift never strains the reader. The 14px (`--rio-fs-sm`) and
   * 13–14px (`--rio-fs-xs`) tiers are reserved for genuinely
   * secondary text: table headers (which scan, not read), kbd
   * shortcuts, footer chips. The heading ladder tightens one notch
   * (20 / 24 / 32) so h1 dominates without the ladder going wobbly. */
  --rio-font-size-base: 1rem;         /* 16px — body baseline */
  --rio-fs-xs:    0.875rem;           /* 14px — kbd, footer, tiny meta */
  --rio-fs-sm:    0.9375rem;          /* 15px — table headers (uppercase) */
  --rio-fs-md:    1rem;               /* 16px — sidebar, nav, button label */
  --rio-fs-base:  1rem;               /* 16px — body, table cell */
  --rio-fs-lg:    1.125rem;           /* 18px — main prose body, lead text */
  --rio-fs-xl:    1.25rem;            /* 20px — section h3 / card title */
  --rio-fs-h3:    1.25rem;            /* 20px — section heading */
  --rio-fs-h2:    1.5rem;             /* 24px — major heading */
  --rio-fs-h1:    2rem;               /* 32px — page title */
  --rio-fs-display: 2.25rem;          /* 36px — login title */

  /* Line heights — tuned per script. Arabic needs more leading because
   * Naskh letterforms hang above and below the baseline.
   * v0.16.0 — UI line-height lifted from 1.5 to 1.6 so buttons / table
   * cells / nav items all sit on the same 1.6 floor as body text.
   * Display sizes get 1.2 because they look loose at 1.25 at 32–36px. */
  --rio-lh-tight:  1.2;               /* h1/h2/h3, big display */
  --rio-lh-ui:     1.6;               /* dense UI: buttons, tags, table */
  --rio-lh-body:   1.65;              /* English paragraph body */
  --rio-lh-arabic: 1.95;              /* Arabic paragraph body */

  /* Weights — opt-in via tokens so the design system can tune
   * regular/medium/semibold/bold without touching every site.
   * Principle 11 (v0.15): display sizes declare gravity through
   * weight 700–800 *and* tracking. Body and table cells stay at
   * 400 for legibility through a long shift. */
  --rio-fw-regular:  400;
  --rio-fw-medium:   500;
  --rio-fw-semibold: 600;
  --rio-fw-bold:     700;
  --rio-fw-heavy:    800;

  /* Tracking (Latin only — Arabic resets to 0 in base/typography.css).
   * Geist is drawn for negative tracking on display sizes. The
   * display + heading values were tightened in v0.15 so large
   * type reads deliberate, not merely large. `allcaps` is the
   * uppercase-label tracking used by table headers, kbd, and
   * sidebar section labels. */
  --rio-tracking-display: -0.035em;
  --rio-tracking-heading: -0.018em;
  --rio-tracking-body:    -0.003em;
  --rio-tracking-tabular: 0;
  --rio-tracking-mono:    0;
  --rio-tracking-allcaps: 0.06em;
}