/* ============================================================
   RIVEX Design Tokens — VI 05.7 (4 Aug 2026)
   Source: RIVEX_Brand_Identity_Guidelines_2026_v05-7.pdf + logo manifest v5.7
   Values marked [derived] are not printed in the guideline.
   ============================================================ */

:root {
  /* ---- Colour (canonical) ---- */
  --rx-ink: #071015;        /* RIVEX Ink — Pantone Black 6 C */
  --rx-paper: #F4F7F8;      /* Institutional Paper */
  --rx-cyan: #18BFD0;       /* RIVEX Cyan — Pantone 319 C. Datum lines,
                               primary actions, verified status only.
                               NEVER body text on light (2.23:1). */
  --rx-mineral: #183A35;    /* Mineral Green — Pantone 5467 C. Spatial /
                               material surfaces only. */
  --rx-graphite: #6F7378;   /* Secondary text, hairlines (manifest palette) */
  --rx-white: #FFFFFF;

  /* [derived] functional aliases */
  --rx-bg: var(--rx-paper);
  --rx-fg: var(--rx-ink);
  --rx-fg-secondary: var(--rx-graphite);
  --rx-hairline: rgba(7, 16, 21, 0.12);        /* [derived] */
  --rx-hairline-on-dark: rgba(244, 247, 248, 0.16); /* [derived] */

  /* ---- Typography ---- */
  --rx-font-latin: "Inter", "Inter Variable", -apple-system, "Helvetica Neue",
    Arial, sans-serif;
  --rx-font-cn: "Source Han Sans CN", "Noto Sans SC", "PingFang SC",
    "Microsoft YaHei", sans-serif;
  --rx-font-hk: "Source Han Sans HK", "Noto Sans HK", "PingFang HK",
    sans-serif;
  --rx-font-mono: "IBM Plex Mono", "SF Mono", Menlo, monospace;
  /* Bilingual default stacks (Latin first, then Han) */
  --rx-font-body-cn: var(--rx-font-latin), "Source Han Sans CN",
    "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
  --rx-font-body-hk: var(--rx-font-latin), "Source Han Sans HK",
    "Noto Sans HK", "PingFang HK", sans-serif;

  /* Latin scale — size/line-height · weight · tracking */
  --rx-display-xl-size: 64px; --rx-display-xl-line: 72px;  /* 500, -0.025em */
  --rx-display-l-size: 48px;  --rx-display-l-line: 56px;   /* 500, -0.02em  */
  --rx-h1-size: 36px;         --rx-h1-line: 44px;          /* 600, -0.015em */
  --rx-h2-size: 24px;         --rx-h2-line: 32px;          /* 600 */
  --rx-body-size: 16px;       --rx-body-line: 24px;        /* 400 */
  --rx-label-size: 12px;      --rx-label-line: 16px;       /* 600, ≤+0.10em */

  /* Chinese scale */
  --rx-cn-display-size: 44px; --rx-cn-display-line: 56px;  /* Medium */
  --rx-cn-h1-size: 32px;      --rx-cn-h1-line: 44px;       /* Medium */
  --rx-cn-h2-size: 22px;      --rx-cn-h2-line: 32px;       /* Medium */
  --rx-cn-body-size: 16px;    --rx-cn-body-line: 28px;     /* Regular */
  --rx-cn-note-size: 12px;    --rx-cn-note-line: 20px;     /* Regular */

  /* ---- Spacing (8px base; 4px micro only; 5/10/15 prohibited) ---- */
  --rx-space-1: 8px;
  --rx-space-2: 16px;
  --rx-space-3: 24px;
  --rx-space-4: 32px;
  --rx-space-6: 48px;
  --rx-space-8: 64px;
  --rx-space-12: 96px;
  --rx-micro: 4px;            /* internal micro-alignment only */

  /* ---- Layout ---- */
  --rx-deck-margin: 64px;     /* 16:9 editorial page outer margin */
  --rx-columns: 12;           /* screen columns */
  --rx-gutter: 12px;          /* screen gutter */
  /* A4 print margin: 18mm (set in @page / PDF export, not CSS px) */

  /* ---- Interface grammar ---- */
  --rx-icon-grid: 24px;       /* icon base grid */
  --rx-icon-stroke: 1.5px;    /* round cap/join, 2px optical inset */
  --rx-icon-radius: 2px;      /* visual corner rounding */
  --rx-radius-card: 8px;      /* [derived] guideline shows subtle rounding,
                                 prints no number; use 0 for stricter feel */
}

/* ---- Dark (Ink) surface context ---- */
.rx-dark, [data-rx-surface="ink"] {
  --rx-bg: var(--rx-ink);
  --rx-fg: var(--rx-white);
  --rx-fg-secondary: rgba(244, 247, 248, 0.64); /* [derived] */
  background: var(--rx-bg);
  color: var(--rx-fg);
}
/* Mineral surface — spatial/material accent contexts only */
[data-rx-surface="mineral"] {
  --rx-bg: var(--rx-mineral);
  --rx-fg: var(--rx-white);
  background: var(--rx-bg);
  color: var(--rx-fg);
}

/* ---- Base type classes ---- */
.rx-display-xl { font: 500 var(--rx-display-xl-size)/var(--rx-display-xl-line) var(--rx-font-body-cn); letter-spacing: -0.025em; }
.rx-display-l  { font: 500 var(--rx-display-l-size)/var(--rx-display-l-line) var(--rx-font-body-cn); letter-spacing: -0.02em; }
.rx-h1   { font: 600 var(--rx-h1-size)/var(--rx-h1-line) var(--rx-font-body-cn); letter-spacing: -0.015em; }
.rx-h2   { font: 600 var(--rx-h2-size)/var(--rx-h2-line) var(--rx-font-body-cn); }
.rx-body { font: 400 var(--rx-body-size)/var(--rx-body-line) var(--rx-font-body-cn); max-width: 72ch; }
.rx-label {
  font: 600 var(--rx-label-size)/var(--rx-label-line) var(--rx-font-latin);
  letter-spacing: 0.10em; text-transform: uppercase;
}
.rx-mono { font-family: var(--rx-font-mono); } /* asset IDs, years, status, timestamps, valuations, verification info ONLY */

/* Chinese-dominant blocks (heading sizes differ from Latin scale) */
.rx-cn-display { font: 500 var(--rx-cn-display-size)/var(--rx-cn-display-line) var(--rx-font-body-cn); }
.rx-cn-h1 { font: 500 var(--rx-cn-h1-size)/var(--rx-cn-h1-line) var(--rx-font-body-cn); }
.rx-cn-h2 { font: 500 var(--rx-cn-h2-size)/var(--rx-cn-h2-line) var(--rx-font-body-cn); }
.rx-cn-body { font: 400 var(--rx-cn-body-size)/var(--rx-cn-body-line) var(--rx-font-body-cn); }
.rx-cn-note { font: 400 var(--rx-cn-note-size)/var(--rx-cn-note-line) var(--rx-font-body-cn); }

/* ---- Cyan datum line (the one approved decorative use of Cyan) ---- */
.rx-datum {
  border: 0; height: 2px; width: 56px; background: var(--rx-cyan);
  margin: var(--rx-space-3) 0;
} /* print: one 0.35pt Cyan rule max on letterhead */

/* ---- Status chips ----
   Official bilingual labels (match UI language):
   VERIFIED=已验证 · REVIEW REQUIRED=需要复核 · PRIVATE=私人访问 · ARCHIVED=已归档 */
.rx-chip {
  display: inline-block; padding: 2px 8px;
  font: 600 12px/16px var(--rx-font-mono);
  letter-spacing: 0.08em; text-transform: uppercase;
  border-radius: var(--rx-icon-radius);
}
.rx-chip--verified { background: var(--rx-ink); color: var(--rx-white); }
.rx-chip--review   { background: var(--rx-cyan); color: var(--rx-ink); }
.rx-chip--private  { background: transparent; color: var(--rx-fg); box-shadow: inset 0 0 0 1px currentColor; }
.rx-chip--archived { background: transparent; color: var(--rx-fg-secondary); box-shadow: inset 0 0 0 1px currentColor; }

/* ---- Data block (IBM Plex Mono key/value) ---- */
.rx-data { font: 400 14px/22px var(--rx-font-mono); }
.rx-data dt { display: inline-block; min-width: 10ch; color: var(--rx-fg-secondary); }
.rx-data dd { display: inline; margin: 0; }

/* ---- Guardrails ---- */
/* Cyan body text on light backgrounds is prohibited (2.23:1).
   Cyan is approved on Ink fields (8.59:1) and as datum/signal on light. */
.rx-body a { color: inherit; text-decoration-color: var(--rx-cyan); } /* [derived] link treatment */

/* ---- Logo helpers ---- */
/* Minimums: wordmark 96px; interlace mark 24px (screen). Clearspace:
   wordmark 0.5×cap-height all sides; mark 0.25×field width.
   Use <img> with the verbatim SVG/PNG from assets/ — never re-set the
   wordmark in type, never apply CSS filters/shadows to marks. */
.rx-wordmark { display: block; min-width: 96px; height: auto; }
.rx-mark     { display: block; min-width: 24px; height: auto; }