:root {
  --erp-black: #0B0A0A;
  --erp-card: #141212;
  --erp-surface: #1A1818;
  --erp-surface-hover: #1C1A1A;
  --erp-border: #231F1F;
  --erp-gold-light: #FFE4A0;
  --erp-gold-primary: #F39C12;
  /* gold-dark = border / bg-tint ONLY (WCAG 1.4.11 non-text 3:1 PASS).
     Forbidden for `color:` text — fails AA normal 4.5:1 (4.0:1 on black,
     3.6:1 on table surface). Text labels use --erp-gold-label. F6 ruling
     2026-06-20 (ui-ella WCAG audit; DECISION-20260619 §3 F6). */
  --erp-gold-dark: #8E6B1B;
  /* gold-label = muted "old gold" (darkgoldenrod) for small secondary text
     (table th / form labels / nav section titles / breadcrumbs). Deepest warm
     gold clearing AA 4.5:1 on blackgold (5.4:1 on table surface, 6.1:1 on
     black) while staying muted — NOT the vivid action gold-primary, preserving
     label-vs-action hierarchy. Paired rgb triplet below per Rule 1. */
  --erp-gold-label: #B8860B;
  /* Wave G (2026-06-01) — Blackgold primary button gradient SoT.
     原 05-buttons.css L7-10 + L53-72 + L62-72 散佈 4 處 hex literal
     (.btn-primary / .btn-cyber-gold / Wave G via .btn-primary)，
     token 化收斂為單一 source。180deg gradient 軸：top → bottom。
     hover 變體：兩 stop 同步抬亮 ~7-10% luminance。
     Brand baseline = 此 4 色；light theme 不 override（per blackgold
     baseline doctrine，light theme 是 opt-in 高對比模式不重設 brand）。 */
  --erp-blackgold-bg-top: #1f1b18;
  --erp-blackgold-bg-bottom: #14110f;
  --erp-blackgold-bg-top-hover: #2a2320;
  --erp-blackgold-bg-bottom-hover: #1a1614;
  --erp-success: #10B981;
  /* P1.3 (2026-05-27 audit): warning shifted off the gold hue. The old
     #F59E0B (HSL 38/92/50) sat 1° from --erp-gold-primary #F39C12
     (HSL 38/90/51) and was indistinguishable from the brand accent,
     breaking ui-ux-pro-max §6 color-semantic. The new value sits 18°
     toward red-orange (HSL 20/93/54), still reads as warning, no longer
     collides with the gold palette. */
  --erp-warning: #F76B1C;
  --erp-danger: #FF4D4F;
  --erp-info: #60A5FA;
  /* Phase B-1 (2026-05-27 audit): RGB triplet tokens for alpha-variant
     composition. Layer 3 / 3.5 files must compose with these triplets
     via rgba(var(--erp-rgb-X), 0.Y) instead of hard-coding R/G/B in
     literal rgba() — otherwise hue changes (cf. P1.3 warning) require
     hunting hundreds of literal sites. Black is included for shadow /
     overlay composition. Naming mirrors the base #hex tokens above. */
  --erp-rgb-gold-primary: 243, 156, 18;
  --erp-rgb-gold-light: 255, 228, 160;
  --erp-rgb-gold-dark: 142, 107, 27;
  --erp-rgb-gold-label: 184, 134, 11; /* #B8860B — paired with --erp-gold-label (Rule 1) */
  /* Wave G blackgold gradient stops — paired triplets per Rule 1 alpha
     composition (rgba(var(--erp-rgb-blackgold-bg-X), 0.Y) when alpha 變體). */
  --erp-rgb-blackgold-bg-top: 31, 27, 24;
  --erp-rgb-blackgold-bg-bottom: 20, 17, 15;
  --erp-rgb-blackgold-bg-top-hover: 42, 35, 32;
  --erp-rgb-blackgold-bg-bottom-hover: 26, 22, 20;
  /* W2.x.2 (2026-06-01) — Auth-shell base RGB triplets lifted to Layer 2 SoT
     per DECISION-20260530. The semantic --auth-* aliases stay scoped under
     .auth-shell in pages/auth-shell.css (Rule 8 isolation), but base RGB
     triplets live here so future alpha-composition reuses single source.
     Paired hex tokens NOT lifted (per Rule 8 — auth shell color identity
     stays inside auth scope; only the channel triplets are global SoT). */
  --erp-rgb-auth-surface-base: 9, 13, 21;
  --erp-rgb-auth-surface-base-2: 13, 18, 28;
  --erp-rgb-auth-text-dim-base: 238, 226, 198;
  --erp-rgb-auth-text-faint-base: 216, 200, 165;
  --erp-rgb-auth-ring-base: 255, 219, 140;
  --erp-rgb-success: 16, 185, 129;
  --erp-rgb-warning: 247, 107, 28;
  --erp-rgb-danger: 255, 77, 79;
  --erp-rgb-info: 96, 165, 250;
  --erp-rgb-muted: 159, 142, 128;
  --erp-rgb-black: 0, 0, 0;
  --erp-rgb-white: 255, 255, 255;
  --erp-rgb-card: 20, 18, 18;
  /* Phase B-2 (2026-05-27): navigation-scope golden accents — visually
     distinct from --erp-rgb-gold-primary (which is the brand action gold).
     nav-accent       = #F0C36E (HSL 38/82/68, sidebar mid-tone)
     nav-accent-light = #FFDC90 (HSL 39/100/78, active highlight)
     Both consumed exclusively by 03-navigation.css for dropdown / nav-link
     hover / active states. Routing via triplets so any future nav theme
     refresh updates a single source. */
  --erp-rgb-nav-accent: 240, 195, 110;
  --erp-rgb-nav-accent-light: 255, 220, 144;
  /* Wave 1 S2 (2026-06-17): gold-accent — darker warm gold used in
     purchases table borders and category-orders popper headers.
     Distinct from gold-primary (243,156,18 = action gold, more orange)
     and nav-accent (240,195,110 = sidebar mid-tone, lighter).
     Hex identity: #D4AF37 (classic "old gold"). */
  --erp-rgb-gold-accent: 212, 175, 55;
  --erp-text-primary: #F5F5F5;
  --erp-text-secondary: #d1d5db;
  --erp-text-muted: #9f8e80;
  /* P1.2 (2026-05-27 audit): text-dim raised from #6f6256 (≈3.3:1 on
     --erp-black, fails WCAG AA 4.5:1 for normal text) to #877a6c
     (≈4.86:1, passes AA). Token only — page-local overrides preserved. */
  --erp-text-dim: #877a6c;
  --erp-text-inverse: #0B0A0A;
  /* Bootstrap .text-secondary bridge (2026-06-13 contrast fix): Bootstrap's
     .text-secondary resolves to rgba(var(--bs-secondary-rgb), ...). site.css
     overrides --bs-secondary-color (used by .text-muted = #d2c6ab) but NOT the
     -rgb companion, so .text-secondary fell back to Bootstrap grey #6c757d
     (3.98:1 on blackgold — fails WCAG AA). Map it to the same gold (#d2c6ab =
     210,198,171, ~11:1) so .text-secondary matches .text-muted. Triplet literal
     belongs in this Layer-2 token file (wwwroot/css/CLAUDE.md Rule 1). */
  --bs-secondary-rgb: 210, 198, 171;
  --erp-focus-ring: 0 0 0 3px rgba(var(--erp-rgb-gold-primary), 0.5);
  --erp-focus-ring-offset: 2px;
  --erp-shadow-card: 0 16px 40px rgba(var(--erp-rgb-black), 0.34);
  --erp-shadow-gold: 0 4px 20px rgba(var(--erp-rgb-gold-dark), 0.15);
  /* Wave 3 (P3-B) — 3 階 elevation shadow system 給 card / raised / modal
     低調風：陰影靠透明度與面積、不靠強度 */
  --erp-shadow-1: 0 1px 2px rgba(var(--erp-rgb-black), 0.35);                              /* flat: 表單 input / chip */
  --erp-shadow-2: 0 4px 12px rgba(var(--erp-rgb-black), 0.40);                             /* card: 主要 surface */
  --erp-shadow-3: 0 12px 32px rgba(var(--erp-rgb-black), 0.52), 0 2px 8px rgba(var(--erp-rgb-black), 0.4); /* modal / dropdown */
  --erp-radius-xs: 4px;
  --erp-radius-sm: 6px;
  --erp-radius-md: 8px;
  --erp-radius-lg: 12px;
  --erp-radius-pill: 999px;
  /* Touch & Emphasis Typography (Wave G — 2026-06-01)
     --erp-touch-target-xl : WCAG large touch tier（≥56px），用於 Auth submit button
     --erp-text-button-emphasis : uppercase CTA 字級（0.92rem）
     --erp-letter-spacing-emphasis : 配對 letter-spacing（0.18em），提升 monospace uppercase 可讀性 */
  --erp-touch-target-xl: 56px;
  --erp-text-button-emphasis: 0.92rem;
  --erp-letter-spacing-emphasis: 0.18em;
  /* W2.x.4+ (2026-06-01) — button hover lift token，消除 05-buttons.css 內
     translateY(-1px) literal 重複。-1px 表向上抬 1px（per ui-ux-pro-max
     §2 press feedback：scale 0.95-1.05 上限同類；本 token 為 hover lift 模式）。 */
  --erp-button-hover-lift: -1px;
  --erp-space-1: 4px;
  --erp-space-2: 8px;
  /* Progress bar thin variant — list-cell inline progress (S2 對帳可視性) */
  --erp-progress-thin: 6px;
  --erp-space-3: 12px;
  --erp-space-4: 16px;
  --erp-space-6: 24px;
  --erp-space-8: 32px;
  --erp-topbar-height: 64px;
  --erp-topbar-mobile-height: 56px;         /* TASK-20260610 F-8 mobile chrome — phone breakpoint topbar (56px vs desktop 64px) */
  --erp-mobile-title-reserve: 120px;        /* TASK-20260610 F-8 — viewport space reserved for hamburger + avatar in topbar-title max-width calc */
  --erp-sidebar-width: 272px;
  --erp-sidebar-collapsed-width: 84px;
  --erp-content-max: 1600px;
  /* z-index scale (per ui-ux-pro-max §5 z-index-management) — single source of truth.
     新增 fixed/sticky/dropdown/modal 元素必須使用 token，禁止 hardcoded numeric value.
     設計理由：100s = page chrome / topbar / sidebar；1000s = ElPlus dropdown；
     1100s = floating dock / FAB；1200-1300s = Bootstrap modal；1400+ = global overlay；
     2000+ = blocking drawer。每層之間留 10 點空間給 future hot-fix overrides。 */
  --erp-z-base: 0;
  --erp-z-page-elevated: 10;
  --erp-z-sticky-banner: 50;          /* support-mode banner（relative+z-index 防止被 dropdown 蓋）*/
  --erp-z-topbar: 60;                 /* sticky top:0 header */
  --erp-z-mobile-dock: 100;           /* mobile bottom dock */
  --erp-z-dropdown: 1000;             /* ElementPlus / Bootstrap dropdown */
  --erp-z-modal: 1060;                /* Bootstrap modal — bumped from 1055 (default) to 1060
                                          2026-06-08 per page-local outlier .procurement-lookup-item
                                          (purchases-procurement-lookup.css:59 z-index 1058) which
                                          must be covered by backdrop+modal. See `--erp-z-modal-backdrop`. */
  --erp-z-modal-backdrop: 1059;       /* Bootstrap modal backdrop — must be 1 below --erp-z-modal
                                          to keep modal clickable, and > 1058 to cover the lookup panel. */
  --erp-z-floating-dock: 1100;        /* help dock + FAB */
  --erp-z-overlay-backdrop: 1140;     /* global modal/overlay backdrop */
  --erp-z-toast: 1200;                /* toast / aria-live region */
  --erp-z-drawer: 2000;               /* ElementPlus drawer (full-height side panel) */
  --erp-font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans TC", "Microsoft JhengHei", sans-serif;
  --erp-font-mono: "Cascadia Mono", "Consolas", "SFMono-Regular", monospace;
  /* Wave 3 (P3-A) — typography scale tokens (5 階)
     依據 ui-ux-pro-max §6 weight-hierarchy + text-styles-system；
     黑金低調風：weight 900 留給 metric value，body 700 / 500 / 400 拉開層次 */
  --erp-text-display: 28px;   /* page-title h1（hero） */
  --erp-text-h1: 22px;        /* section heading h2 */
  --erp-text-h2: 18px;        /* card-header h5 */
  --erp-text-h3: 16px;        /* sub-heading */
  --erp-text-body: 14px;      /* body text */
  --erp-text-caption: 12px;   /* meta / hint */
  --erp-text-micro: 11px;     /* kicker / label */
  --erp-weight-black: 900;    /* metric / hero number */
  --erp-weight-bold: 800;     /* section heading / strong emphasis */
  --erp-weight-semibold: 700; /* card title / label */
  --erp-weight-medium: 500;   /* form label */
  --erp-weight-regular: 400;  /* body */
  --erp-motion-fast: 150ms;
  --erp-motion-base: 220ms;
  --erp-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --erp-ds-bg-base: var(--erp-black);
  --erp-ds-bg-canvas: var(--erp-black);
  --erp-ds-bg-shell: var(--erp-black);
  --erp-ds-bg-panel: var(--erp-card);
  --erp-ds-bg-panel-raised: var(--erp-surface);
  --erp-ds-bg-panel-muted: #100f0f;
  --erp-ds-bg-overlay: rgba(var(--erp-rgb-black), 0.72);
  --erp-ds-text-main: var(--erp-text-primary);
  --erp-ds-text-muted: var(--erp-text-secondary);
  --erp-ds-text-dim: var(--erp-text-muted);
  --erp-ds-text-inverse: var(--erp-text-inverse);
  --erp-ds-gold: var(--erp-gold-primary);
  --erp-ds-gold-muted: var(--erp-gold-dark);
  --erp-ds-gold-soft: rgba(var(--erp-rgb-gold-primary), 0.08);
  --erp-ds-gold-hover: var(--erp-gold-light);
  --erp-ds-gold-strong: var(--erp-gold-light);
  --erp-ds-success: var(--erp-success);
  --erp-ds-success-bg: rgba(var(--erp-rgb-success), 0.12);
  --erp-ds-warning: var(--erp-warning);
  --erp-ds-warning-bg: rgba(var(--erp-rgb-warning), 0.14);
  --erp-ds-danger: var(--erp-danger);
  --erp-ds-danger-text: #ffd6d7;
  --erp-ds-danger-text-strong: #fff2f2;
  /* Phase C (2026-05-27 audit): badge / .text-* status text tokens. The
     existing --erp-ds-danger-text (#ffd6d7) is used by form errors (06-
     forms .erp-field-error) while badge --danger and the .text-danger
     utility lift use #fecaca, a slightly different shade — preserved as
     -faint variant rather than collapsed to avoid an unverified visual
     change. The 4 tokens below pull badge/utility text colors out of
     09-status.css literals into the token layer. */
  --erp-ds-success-text: #a7f3d0;
  --erp-ds-warning-text: #fde68a;
  --erp-ds-info-text: #bfdbfe;
  --erp-ds-danger-text-faint: #fecaca;
  --erp-ds-danger-bg: rgba(var(--erp-rgb-danger), 0.12);
  --erp-ds-info: var(--erp-info);
  --erp-ds-info-bg: rgba(var(--erp-rgb-info), 0.12);
  --erp-ds-denied: #877a6d;
  --erp-ds-denied-bg: rgba(var(--erp-rgb-muted), 0.12);
  --erp-ds-border-subtle: var(--erp-border);
  --erp-ds-border-muted: var(--erp-border);
  --erp-ds-border-strong: #2c2520;
  --erp-ds-border-gold: rgba(var(--erp-rgb-gold-primary), 0.78);
  --erp-border-gold-hairline: rgba(var(--erp-rgb-gold-primary), 0.22);
  --erp-ds-border-danger: rgba(var(--erp-rgb-danger), 0.5);
  --erp-ds-space-1: var(--erp-space-1);
  --erp-ds-space-2: var(--erp-space-2);
  --erp-ds-space-3: var(--erp-space-3);
  --erp-ds-space-4: var(--erp-space-4);
  --erp-ds-space-5: 20px;
  --erp-ds-space-6: var(--erp-space-6);
  --erp-ds-space-8: var(--erp-space-8);
  --erp-ds-shell-sidebar-width: var(--erp-sidebar-width);
  --erp-ds-shell-sidebar-collapsed-width: var(--erp-sidebar-collapsed-width);
  --erp-ds-header-height: var(--erp-topbar-height);
  --erp-ds-content-max: var(--erp-content-max);
  --erp-ds-radius-xs: var(--erp-radius-xs);
  --erp-ds-radius-sm: var(--erp-radius-sm);
  --erp-ds-radius-md: var(--erp-radius-lg);
  --erp-ds-radius-pill: var(--erp-radius-pill);
  --erp-ds-shadow-panel: var(--erp-shadow-card);
  --erp-ds-shadow-raised: 0 20px 54px rgba(var(--erp-rgb-black), 0.48);
  --erp-ds-shadow-gold: var(--erp-shadow-gold);
  --erp-ds-focus-ring: var(--erp-focus-ring);
  --erp-ds-font-body: var(--erp-font-body);
  --erp-ds-font-number: var(--erp-font-mono);
  --erp-ds-line-height: 1.5;
  --erp-ds-motion-fast: var(--erp-motion-fast);
  --erp-ds-motion-base: var(--erp-motion-base);
  --erp-ds-motion-slow: 280ms;
  --erp-ds-motion-exit: 140ms;        /* exit-faster-than-enter (60-70% of entry, per UI_MOTION_SYSTEM §3) */
  --erp-ds-ease: var(--erp-ease);
  --erp-ds-ease-out: cubic-bezier(0.0, 0.0, 0.2, 1);   /* entering (alias of --erp-ease) */
  --erp-ds-ease-in: cubic-bezier(0.4, 0.0, 1, 1);      /* exiting (slower start, fast end) */
  --erp-ds-ease-emphasis: cubic-bezier(0.4, 0.0, 0.2, 1); /* emphasis / state change */
  --erp-ds-stagger-step: 50ms;        /* list/grid item stagger interval, per UI_MOTION_SYSTEM §3 */
  /* 波 1.1 mobile drawer tokens — PM 2026-05-30 ratified.
     Required by `02-shell.css` mobile drawer rule (< 1024px). ui-ella spec values. */
  --erp-drawer-max-width: 320px;          /* off-canvas drawer width clamp; combined with min(88vw, _) for narrow phones */
  --erp-drawer-backdrop-blur: 4px;        /* backdrop blur radius (subtle, not cyber) */
  --erp-drawer-backdrop-saturate: 110%;   /* backdrop saturate amplifier */

  /* ─────────────────────────────────────────────────────────────────────
   * Tailwind @theme mirror (added Slice 1 / 2026-05-13)
   *
   * These aliases mirror the variables previously defined inside
   * `wwwroot/css/tailwind/erp-tailwind.css` @theme block. They keep
   * `var(--color-erp-*) / var(--radius-erp-*) / var(--shadow-erp-*)`
   * references resolvable AFTER Tailwind source is migrated and the
   * Tailwind compiler is no longer in the load chain.
   *
   * Naming retention is deliberate (no rename of consuming CSS) to avoid
   * a churn-only refactor across migration. A naming-collapse step may
   * happen in Slice 10 (Tailwind teardown) if `--color-erp-*` becomes
   * orphaned.
   *
   * Authority: docs/CSS_ARCHITECTURE.md §5.1 Token naming
   * Migration: output/audit/CSS_TAILWIND_MIGRATION_TABLE_20260513.md §3.2
   *   (output/audit/ purged 2026-05-29 mass purge; Tailwind-exclusion live SoT =
   *    docs/SRS.md §Frontend Technical Standards + docs/CSS_ARCHITECTURE.md §6.4)
   * ──────────────────────────────────────────────────────────────────── */
  --color-erp-bg: var(--erp-black);
  --color-erp-surface: var(--erp-card);
  --color-erp-surface-strong: var(--erp-surface);
  --color-erp-surface-hover: var(--erp-surface-hover);
  --color-erp-context: var(--erp-surface);
  --color-erp-border: var(--erp-border);
  --color-erp-text: var(--erp-text-primary);
  --color-erp-muted: var(--erp-text-muted);
  --color-erp-gold: var(--erp-gold-primary);
  --color-erp-gold-light: var(--erp-gold-light);
  --color-erp-gold-dark: var(--erp-gold-dark);
  --color-erp-success: var(--erp-success);
  --color-erp-danger: var(--erp-danger);
  --radius-erp-sm: var(--erp-radius-xs);
  --radius-erp-md: var(--erp-radius-sm);
  --radius-erp-lg: var(--erp-radius-md);
  --shadow-erp-surface: var(--erp-shadow-card);
  --shadow-erp-focus: var(--erp-focus-ring);

  /* ─────────────────────────────────────────────────────────────────────
   * Blackgold surface / glow / text tokens (Layer 2 SoT)
   *
   * History: site.css L2557-2587 → 00-tokens.css Slice 1b/2026-05-13
   * (as --cyber-*) → --erp-* namespace Slice 4/2026-06-26.
   * body.theme-light overrides below; body.theme-cyber-mandarin class
   * was never mounted (dead CSS deleted same slice).
   * ──────────────────────────────────────────────────────────────────── */
  --erp-bg-base: #040406;
  --erp-bg-panel: #0e111a;
  --erp-bg-glass: rgba(14, 17, 26, 0.85);
  --erp-gold-muted: #b59453;
  --erp-gold-bright: #f0c36e;
  --erp-gold-glow: #ffd98f;
  --erp-divider: rgba(240, 195, 110, 0.22);
  --erp-divider-soft: rgba(240, 195, 110, 0.08);
  --erp-text-main: #f5f2e9;
  --erp-text-soft: #bdb7a7;
  --erp-red-accent: #d24f3c;
  --erp-red-glow: #ff7866;
  --erp-glow-gold: 0 0 10px rgba(240, 195, 110, 0.5);
  --erp-glow-gold-strong: 0 0 20px rgba(255, 217, 143, 0.6);
  --erp-glow-red: 0 0 15px rgba(210, 79, 60, 0.7);
  --erp-panel-shadow: 0 16px 32px rgba(var(--erp-rgb-black), 0.42);
  --erp-glass-blur: blur(12px) saturate(160%);

  /* Legacy --cyber-* aliases (site.css backward compat — remove when
     site.css consumers are migrated to --erp-* in burndown) */
  --cyber-bg-base: var(--erp-bg-base);
  --cyber-bg-panel: var(--erp-bg-panel);
  --cyber-bg-glass: var(--erp-bg-glass);
  --cyber-gold-muted: var(--erp-gold-muted);
  --cyber-gold-bright: var(--erp-gold-bright);
  --cyber-gold-glow: var(--erp-gold-glow);
  --cyber-divider: var(--erp-divider);
  --cyber-divider-soft: var(--erp-divider-soft);
  --cyber-text-main: var(--erp-text-main);
  --cyber-text-soft: var(--erp-text-soft);
  --cyber-red-accent: var(--erp-red-accent);
  --cyber-red-glow: var(--erp-red-glow);
  --cyber-glow-gold: var(--erp-glow-gold);
  --cyber-glow-gold-strong: var(--erp-glow-gold-strong);
  --cyber-glow-red: var(--erp-glow-red);
  --cyber-panel-shadow: var(--erp-panel-shadow);
  --cyber-glass-blur: var(--erp-glass-blur);

  /* Bootstrap variable overrides (blackgold defaults) */
  --bs-body-color: var(--erp-text-main);
  --bs-heading-color: #f7dfad;
  --bs-link-color: #8ec7ff;
  --bs-link-hover-color: #c3e0ff;
  /* S2 2026-07-11: ownership moved here from site.css :root（shrink-only 刪除）。
     真正根因：body.theme-light 過去對 --bs-emphasis/secondary/tertiary-color「完全沒有覆寫」
     （變數只存在 site.css :root）→ .text-body-emphasis / .table-active 等 Bootstrap 面在亮色
     顯近白字。注意 body.theme-light 特異性 (0,1,1) 本就高於 :root (0,0,1)，load order 不是
     阻因——搬家是 SoT 併址紀律（變數與其 theme-light 對應必須同檔），不是 cascade 需要。
     值與原 site.css 完全相同（blackgold 零變化）；theme-light 覆寫見下方 body.theme-light。
     （.table 儲存格字色另有根因＝site.css 舊 .table{color:var(--dark-ink)} 已同刀移除，
     走 Bootstrap 原生 --bs-table-color → --bs-body-color 鏈。） */
  --bs-body-color-rgb: 245, 242, 233;
  --bs-secondary-color: #d2c6ab;
  --bs-secondary-color-rgb: 210, 198, 171;
  --bs-tertiary-color: #b9ab8d;
  --bs-tertiary-color-rgb: 185, 171, 141;
  --bs-emphasis-color: #fff3da;
  --bs-emphasis-color-rgb: 255, 243, 218;

  /* ─────────────────────────────────────────────────────────────────────
   * Wave 3 cross-cutting tokens (F11/F12/F15/F17) — Added 2026-05-14
   *
   * Per A3_DESIGN_TOKEN_GAP_AUDIT_20260514：F11/F12/F15/F17 spec 引用 17 個
   * 命名 token 但 00-tokens.css 全無定義（100% phantom）。Wave 3 cross-cutting
   * impl 啟動前必須先補。本 commit 提供 INITIAL VALUES — final color decisions
   * 仍待 ui-ella + ui-ux-pro-max review，可再調整不破壞 spec 引用（role pack TBD per PM）。
   *
   * Authority chain: docs/F11/F12/F15/F17 → 00-tokens.css → Layer 3 components
   * Audit: output/audit/A3_DESIGN_TOKEN_GAP_AUDIT_20260514.md
   * MASTER: P1-13 / P2-22
   * ──────────────────────────────────────────────────────────────────── */

  /* Three-tier permission scope (F12 spec L211-228) */
  --color-platform-100: #DBEAFE;            /* light blue bg — platform-tier chip */
  --color-platform-700: #1D4ED8;            /* strong blue text/border — platform-tier chip */
  --color-instance-100: #EDE9FE;            /* light purple bg — instance-tier chip */
  --color-instance-700: #6D28D9;            /* strong purple text/border — instance-tier chip */
  --color-tenant-100: var(--erp-gold-light); /* light gold bg — tenant-tier chip (brand) */
  --color-tenant-700: var(--erp-gold-dark);  /* strong gold text/border — tenant-tier chip (brand) */

  /* Danger / warning shade ramp (F11 / F15 / F17) */
  --color-danger-600: #DC2626;              /* F15 主視覺背景 (test badge) */
  --color-danger-700: #B91C1C;              /* F11 modal 標題色 / F17 主按鈕背景 */
  --color-text-on-danger: #FFFFFF;          /* F15 紅底配字 */
  --color-warning-100: #FEF3C7;             /* F15 降階背景 (淺黃) */
  --color-warning-700: #B45309;             /* F11 expires 文字色 */
  --color-warning-900: #78350F;             /* F15 降階文字 */

  /* Dropdown / popover / elevation (F12 spec L91-94, L220-228) */
  --color-border-strong: var(--erp-ds-border-strong);  /* F12 dropdown border */
  --color-bg-elevated: var(--erp-surface);              /* F12 dropdown 背景 */
  --color-bg-hover: var(--erp-surface-hover);           /* F12 item hover 背景 */
  --shadow-popover: 0 8px 16px rgba(var(--erp-rgb-black), 0.3);     /* F12 dropdown 陰影 */

  /* ─────────────────────────────────────────────────────────────────────
   * P1-25/26/27 — Archetype panel literal lift (2026-05-14)
   *
   * Recurring warm-gold/dark-panel literals authored inline across a3 /
   * a4 / a2 archetype layers. Lifted here so Layer 3.5 obeys §Rule 1
   * (no hex / rgba literals in 01-15 / a1-a6).
   *
   * Authority: wwwroot/css/CLAUDE.md §0 / §1.1 / §3
   * MASTER: P1-25/26/27 CSS literal lift
   * ──────────────────────────────────────────────────────────────────── */
  --erp-panel-warm-bg-strong: rgba(9, 14, 22, 0.72);      /* a3 summary-card bg */
  --erp-panel-warm-bg-card: rgba(8, 12, 20, 0.78);        /* a3 flow-card / workspace-card / explorer panel bg */
  --erp-panel-warm-bg-disclosure: rgba(8, 12, 20, 0.74);  /* a3 disclosure body bg */
  --erp-panel-warm-bg-strip: rgba(12, 17, 24, 0.58);      /* a3 strip bar bg */
  --erp-panel-warm-border-soft: rgba(255, 200, 120, 0.14);    /* a3 strip border (very soft) */
  --erp-panel-warm-border-mid: rgba(255, 200, 120, 0.18);     /* a3 card border (mid) */
  --erp-panel-warm-border-disclosure: rgba(255, 200, 120, 0.16); /* a3 disclosure border */
  --erp-panel-warm-border-strong: rgba(255, 200, 120, 0.22);  /* a3 summary-card border */
  --erp-panel-warm-chip-border: rgba(255, 200, 120, 0.12);    /* a3 strip > span chip border */
  --erp-panel-warm-flowstep-border: rgba(255, 200, 120, 0.2); /* a3 flow-step chip border */
  --erp-text-cream-strong: #fff0cd;                       /* a3 summary-card strong / disclosure summary text */
  --erp-text-cream-body: rgba(248, 235, 209, 0.82);       /* a3 flow-card paragraph text */
  --erp-text-cream-soft: rgba(248, 235, 209, 0.86);       /* a3 workspace-card paragraph text */
  --erp-text-cream-strip: rgba(246, 232, 199, 0.9);       /* a3 strip body text */
  --erp-text-cream-flowstep: rgba(255, 235, 202, 0.92);   /* a3 flow-step chip text */
  --erp-text-warm-label: rgba(255, 219, 161, 0.72);       /* a3 summary-label text */
  --erp-gold-warm-chip-bg: rgba(255, 190, 90, 0.08);      /* a3 strip > span chip bg / flow-step bg */
  --erp-gold-warm-active-bg: rgba(var(--erp-rgb-gold-primary), 0.05);    /* a3 command-card active state bg */

  /* State tint — faint variants for tile/card surfaces (a4-explorer / other Layer 3.5) */
  --erp-ds-warning-bg-faint: rgba(var(--erp-rgb-warning), 0.06);    /* a4 metric warning bg */
  --erp-ds-warning-bg-ultrafaint: rgba(var(--erp-rgb-warning), 0.04); /* a4 summary tile warning bg */
  --erp-ds-warning-bg-card: rgba(var(--erp-rgb-warning), 0.05);     /* a4 result card warning bg */
  --erp-ds-warning-border-soft: rgba(var(--erp-rgb-warning), 0.4);  /* a4 warning border */
  --erp-ds-success-bg-faint: rgba(var(--erp-rgb-success), 0.06);    /* a4 metric success bg */
  --erp-ds-success-border-soft: rgba(var(--erp-rgb-success), 0.4);  /* a4 success border */
  --erp-ds-gold-tint-faint: rgba(var(--erp-rgb-gold-primary), 0.04);     /* a4 target card tint */
  --erp-ds-danger-bg-card: rgba(var(--erp-rgb-danger), 0.05);       /* a2 rule-card danger bg */

  /* Wizard step indicator (a6) — done / current state */
  --erp-ds-wizard-step-done-bg: rgba(var(--erp-rgb-success), 0.14);
  --erp-ds-wizard-step-current-bg: rgba(var(--erp-rgb-gold-primary), 0.14);
  --erp-ds-wizard-step-current-ring: 0 0 0 3px rgba(var(--erp-rgb-gold-primary), 0.10);
  --erp-ds-shadow-wizard-footer: 0 -8px 24px rgba(var(--erp-rgb-black), 0.3);

  /* ─────────────────────────────────────────────────────────────────────
   * Stage B-0 (2026-05-15) — utility-class token families
   *
   * Per DECISION-20260515-css-trunk-cleanup-architecture §2 verdict A
   * (PASS-strict) + §4.2: all px literals previously in 11-utilities.css
   * must reference tokens defined here. Six-bucket col-min, three-bucket
   * scroll-cap / img-clamp / grid-autofit scales — slices may add new
   * sizes via ADR §11 amendment, not by inventing literals elsewhere.
   *
   * Authority: DECISION-20260515-css-trunk-cleanup-architecture.md §4.2
   *   (ADR purged 2026-05-29 mass purge; live SoT = ../CLAUDE.md Rule 1 §4.2 token families + tools/qa/css-drift-check.cjs)
   * ──────────────────────────────────────────────────────────────────── */
  --erp-col-min-xs: 110px;
  --erp-col-min-sm: 130px;
  --erp-col-min-md: 160px;
  --erp-col-min-lg: 200px;
  --erp-col-min-xl: 240px;
  --erp-col-min-xxl: 280px;
  --erp-scroll-cap-sm: 280px;
  --erp-scroll-cap-md: 360px;
  --erp-scroll-cap-lg: 480px;
  --erp-img-clamp-sm: 48px;
  --erp-img-clamp-md: 64px;
  --erp-img-clamp-lg: 96px;
  --erp-grid-autofit-sm: 160px;
  --erp-grid-autofit-md: 200px;
  --erp-grid-autofit-lg: 240px;

  /* ─────────────────────────────────────────────────────────────────────
   * Stage B-2 (2026-05-15) — Purchases popper-stack z-index + tints
   *
   * Purchases CategoryOrders 用 9× z:2 (cell-level stack within el-popover
   * 內容) + 9× z:1200 (popover 自身需高於兄弟 popper)。Element Plus 預設
   * popper z 取決於 zIndex.nextZIndex() 動態值；此處用固定 token 確保
   * cross-popper 視覺穩定。
   *
   * Tinted card-header 既有 hex literal 在 _PurchaseEditorModal 與
   * _WorkstationSupport：#f0f7ff (info-soft 藍底) / #f0fff4 (success-soft
   * 綠底) / #f0f8ff (info-soft 變體) 全部統一 → 既有 --erp-ds-info-bg-soft
   * / --erp-ds-success-bg-soft（B-2 新增）
   * ──────────────────────────────────────────────────────────────────── */
  --erp-z-popper-base: 2;
  --erp-z-popper-stack: 1200;
  --erp-ds-info-bg-soft: rgba(var(--erp-rgb-info), 0.06);
  --erp-ds-success-bg-soft: rgba(var(--erp-rgb-success), 0.05);
  --erp-col-w-mini: 90px;  /* tiny action column (90px exact for 操作 / 編輯 buttons) */
  --erp-border-width-thick: 4px;  /* status-indicator border-left (09-status.css) */
  --erp-border-width-hairline: 1px;  /* shell gold hairline dividers (02-shell.css) */
  --erp-border-width-thin: 2px;  /* family-nav active underline (03-navigation.css .tenant-family-nav) */
  /* TenantSettings family-nav (.tenant-family-nav) sizing — moved from
     tenant-shared.css to 03-navigation.css by Wave C item 3 S2. Exact-pixel
     values preserved as named tokens so the shared sub-nav (≈12 views) is
     byte-equivalent visually and Layer-3 stays literal-free (Rule 1 / C5). */
  --erp-family-nav-item-gap: 6px;       /* label↔badge gap */
  --erp-family-nav-item-pad-x: 14px;    /* item horizontal padding */
  --erp-family-nav-badge-pad-y: 1px;    /* badge vertical padding */
  --erp-family-nav-badge-pad-x: 6px;    /* badge horizontal padding */
  --erp-family-nav-badge-radius: 8px;   /* badge corner radius */
  --erp-family-nav-secondary-font: 13px;/* --secondary modifier item font-size */

  /* ─────────────────────────────────────────────────────────────────────
   * P1.9 (2026-05-16) — Support-mode banner tokens
   *
   * Per docs/specs/UI_SUPPORT_MODE_BANNER.md §2.2: banner 強制橘 (orange)
   * 與所有 tenant theme 區分；white text contrast vs orange ≥ 4.5:1（WCAG AA）。
   * 原 .erp-support-mode-banner 用 --erp-danger（紅）— 改為 orange 與 spec 對齊，
   * 也避免與 tenant accent / data-row danger highlight 混淆。
   * ──────────────────────────────────────────────────────────────────── */
  --erp-color-support-mode-banner: #fa8c16;
  --erp-color-support-mode-banner-strong: #d46b08;
  --erp-color-support-mode-banner-bg-soft: rgba(250, 140, 22, 0.08);
  --erp-color-support-mode-banner-text: #ffffff;
}

/* ─────────────────────────────────────────────────────────────────────
 * S4 P1.3 — Dark Mode Parity / Light theme tokens (2026-05-16)
 *
 * UCP-FULL-20260516 / Slice 4. Per CSS_ARCHITECTURE Rule 7 — body.theme-*
 * selectors live ONLY in 00-tokens.css and ONLY override CSS variables.
 *
 * Design direction: "warm-paper-gold" editorial light theme — warm cream
 * canvas + ink-dark text + retained gold brand accents. NOT inverted dark
 * (per ui-ux-pro-max §6 color-dark-mode rule: design light/dark variants
 * together to keep brand, contrast, and style consistent).
 *
 * Contrast targets:
 *   - text-primary on canvas: #1F1A14 vs #FAF8F2 = 16.9:1 (AAA)
 *   - text-secondary on canvas: #44392E vs #FAF8F2 = 11.5:1 (AAA)
 *   - text-muted on canvas: #6B5C49 vs #FAF8F2 = 6.6:1 (AAA)
 *   - gold-primary on canvas: #B97A0A vs #FAF8F2 = 4.6:1 (AA)
 *   - danger-text on danger-bg: #7F1D1D on light = AA pass
 *
 * Mode activation: body.theme-light class set ONLY by:
 *   1. user click on [data-theme-toggle] (mirrors data-ui-mode-toggle pattern)
 *   2. initial load JS reads localStorage `erp-theme` === "light"
 * 黑金 (blackgold) 是品牌預設，永不因 OS prefers-color-scheme 自動切換
 * (user 2026-05-16 黑金品牌原則 — prefers-color-scheme 偵測已移除)
 *   3. tenant theme override (S5 P1.7) can layer on top via CSS @layer
 *
 * Authority: ai-system/workflow/evidence/UCP-FULL-20260516/S4-P1-3-DARK-MODE/
 * ──────────────────────────────────────────────────────────────────── */
body.theme-light {
  /* Canvas / Surfaces — warm cream paper */
  --erp-black: #FAF8F2;
  --erp-card: #FFFFFF;
  --erp-surface: #F4F0E5;
  --erp-surface-hover: #ECE6D5;
  --erp-border: #DDD5C2;
  --color-erp-context: var(--erp-surface);

  /* Gold — keep brand, darken for AA contrast on cream */
  --erp-gold-light: #F0B83E;
  --erp-gold-primary: #B97A0A;
  --erp-gold-dark: #6B4408;

  /* Status — darker for AA on light */
  --erp-success: #047857;
  --erp-warning: #B45309;
  --erp-danger: #B91C1C;
  --erp-info: #1D4ED8;

  /* Text — warm ink */
  --erp-text-primary: #1F1A14;
  --erp-text-secondary: #44392E;
  --erp-text-muted: #6B5C49;
  --erp-text-dim: #8C7E6A;
  --erp-text-inverse: #FAF8F2;

  /* Focus + shadows — softer on light */
  --erp-focus-ring: 0 0 0 3px rgba(185, 122, 10, 0.45);
  --erp-shadow-card: 0 2px 12px rgba(31, 26, 20, 0.08);
  --erp-shadow-gold: 0 2px 12px rgba(185, 122, 10, 0.12);
  --erp-shadow-1: 0 1px 2px rgba(31, 26, 20, 0.08);
  --erp-shadow-2: 0 4px 12px rgba(31, 26, 20, 0.10);
  --erp-shadow-3: 0 12px 32px rgba(31, 26, 20, 0.14), 0 2px 8px rgba(31, 26, 20, 0.08);

  /* Semantic ds-layer overrides (cascade picks these up via var() chain) */
  --erp-ds-bg-overlay: rgba(31, 26, 20, 0.42);
  --erp-ds-bg-panel-muted: #F8F4E8;
  --erp-ds-gold-soft: rgba(185, 122, 10, 0.08);
  --erp-ds-gold-hover: var(--erp-gold-primary);
  --erp-ds-gold-strong: var(--erp-gold-dark);
  --erp-ds-success-bg: rgba(4, 120, 87, 0.10);
  --erp-ds-warning-bg: rgba(180, 83, 9, 0.10);
  --erp-ds-danger-bg: rgba(185, 28, 28, 0.10);
  --erp-ds-danger-text: #7F1D1D;
  --erp-ds-danger-text-strong: #5C0F0F;
  --erp-ds-info-bg: rgba(29, 78, 216, 0.10);
  --erp-ds-denied: #8C7E6A;
  --erp-ds-denied-bg: rgba(140, 126, 106, 0.10);
  --erp-ds-border-strong: #C9BFA8;
  --erp-ds-border-gold: rgba(185, 122, 10, 0.55);
  --erp-ds-border-danger: rgba(185, 28, 28, 0.45);
  --erp-ds-shadow-raised: 0 16px 40px rgba(31, 26, 20, 0.14);

  /* Bootstrap variable overrides */
  --bs-body-color: var(--erp-text-primary);
  --bs-heading-color: var(--erp-gold-dark);
  --bs-link-color: var(--erp-info);
  --bs-link-hover-color: #1E40AF;
  /* S2 2026-07-11: 亮色對應——:root 的 blackgold 近白系在亮底不可讀（此前這組在
     theme-light 完全沒有覆寫）。消費面＝.text-body-emphasis / .table-active / .text-muted
     等 Bootstrap 變數鏈；.table 一般儲存格字色走 --bs-body-color（L605 已覆寫）。 */
  --bs-body-color-rgb: 31, 26, 20;
  --bs-secondary-color: var(--erp-text-soft);
  --bs-secondary-color-rgb: 68, 57, 46;
  --bs-tertiary-color: var(--erp-text-soft);
  --bs-tertiary-color-rgb: 68, 57, 46;
  --bs-emphasis-color: var(--erp-text-main);
  --bs-emphasis-color-rgb: 31, 26, 20;

  /* Light-mode surface / glow / text overrides (mirror of :root blackgold tokens) */
  --erp-bg-base: #FAF8F2;
  --erp-bg-panel: #FFFFFF;
  --erp-bg-glass: rgba(255, 255, 255, 0.85);
  --erp-gold-muted: #8B6A0C;
  --erp-gold-bright: #B97A0A;
  --erp-gold-glow: #F0B83E;
  --erp-divider: rgba(185, 122, 10, 0.25);
  --erp-divider-soft: rgba(185, 122, 10, 0.10);
  --erp-text-main: #1F1A14;
  --erp-text-soft: #44392E;
  --erp-red-accent: #B91C1C;
  --erp-red-glow: #7F1D1D;
  --erp-glow-gold: 0 0 0 0 transparent;
  --erp-glow-gold-strong: 0 0 0 0 transparent;
  --erp-glow-red: 0 0 0 0 transparent;
  --erp-panel-shadow: 0 4px 16px rgba(31, 26, 20, 0.10);
  /* Legacy --cyber-* aliases (site.css backward compat) */
  --cyber-bg-base: var(--erp-bg-base);
  --cyber-bg-panel: var(--erp-bg-panel);
  --cyber-bg-glass: var(--erp-bg-glass);
  --cyber-gold-muted: var(--erp-gold-muted);
  --cyber-gold-bright: var(--erp-gold-bright);
  --cyber-gold-glow: var(--erp-gold-glow);
  --cyber-divider: var(--erp-divider);
  --cyber-divider-soft: var(--erp-divider-soft);
  --cyber-text-main: var(--erp-text-main);
  --cyber-text-soft: var(--erp-text-soft);
  --cyber-red-accent: var(--erp-red-accent);
  --cyber-red-glow: var(--erp-red-glow);
  --cyber-glow-gold: var(--erp-glow-gold);
  --cyber-glow-gold-strong: var(--erp-glow-gold-strong);
  --cyber-glow-red: var(--erp-glow-red);
  --cyber-panel-shadow: var(--erp-panel-shadow);

  /* Tenant chip (tier) */
  --color-tenant-100: rgba(185, 122, 10, 0.15);
  --color-tenant-700: var(--erp-gold-primary);

  /* Dropdown / popover */
  --color-border-strong: #C9BFA8;
  --color-bg-elevated: #FFFFFF;
  --color-bg-hover: #F4F0E5;
  --shadow-popover: 0 8px 16px rgba(31, 26, 20, 0.12);

  /* Archetype panel literals — flip from dark to light tints */
  --erp-panel-warm-bg-strong: rgba(244, 240, 229, 0.72);
  --erp-panel-warm-bg-card: rgba(248, 244, 232, 0.78);
  --erp-panel-warm-bg-disclosure: rgba(248, 244, 232, 0.74);
  --erp-panel-warm-bg-strip: rgba(240, 236, 222, 0.58);
  --erp-panel-warm-border-soft: rgba(185, 122, 10, 0.14);
  --erp-panel-warm-border-mid: rgba(185, 122, 10, 0.20);
  --erp-panel-warm-border-disclosure: rgba(185, 122, 10, 0.18);
  --erp-panel-warm-border-strong: rgba(185, 122, 10, 0.32);
  --erp-panel-warm-chip-border: rgba(185, 122, 10, 0.16);
  --erp-panel-warm-flowstep-border: rgba(185, 122, 10, 0.22);
  --erp-text-cream-strong: #2D2417;
  --erp-text-cream-body: rgba(31, 26, 20, 0.82);
  --erp-text-cream-soft: rgba(31, 26, 20, 0.86);
  --erp-text-cream-strip: rgba(31, 26, 20, 0.90);
  --erp-text-cream-flowstep: rgba(31, 26, 20, 0.92);
  --erp-text-warm-label: rgba(140, 126, 106, 0.85);
  --erp-gold-warm-chip-bg: rgba(185, 122, 10, 0.08);
  --erp-gold-warm-active-bg: rgba(185, 122, 10, 0.06);

  /* State tints — faint variants */
  --erp-ds-warning-bg-faint: rgba(180, 83, 9, 0.06);
  --erp-ds-warning-bg-ultrafaint: rgba(180, 83, 9, 0.04);
  --erp-ds-warning-bg-card: rgba(180, 83, 9, 0.05);
  --erp-ds-warning-border-soft: rgba(180, 83, 9, 0.40);
  --erp-ds-success-bg-faint: rgba(4, 120, 87, 0.06);
  --erp-ds-success-border-soft: rgba(4, 120, 87, 0.40);
  --erp-ds-gold-tint-faint: rgba(185, 122, 10, 0.06);
  --erp-ds-danger-bg-card: rgba(185, 28, 28, 0.05);

  /* Wizard step (a6) */
  --erp-ds-wizard-step-done-bg: rgba(4, 120, 87, 0.14);
  --erp-ds-wizard-step-current-bg: rgba(185, 122, 10, 0.14);
  --erp-ds-wizard-step-current-ring: 0 0 0 3px rgba(185, 122, 10, 0.18);
  --erp-ds-shadow-wizard-footer: 0 -8px 24px rgba(31, 26, 20, 0.12);

  /* Popper / soft state */
  --erp-ds-info-bg-soft: rgba(29, 78, 216, 0.06);
  --erp-ds-success-bg-soft: rgba(4, 120, 87, 0.05);

  /* Support-mode banner — orange stays bright (cross-theme identity);
     text flips to dark for AA contrast vs orange (#1F1A14 vs #fa8c16 = 5.4:1 AA pass) */
  --erp-color-support-mode-banner-text: #1F1A14;
  --erp-color-support-mode-banner-bg-soft: rgba(250, 140, 22, 0.12);

  /* Touch & Emphasis Typography — baseline-shared with :root（尺寸/間距與主題無關，不需 override） */
  /* --erp-touch-target-xl / --erp-text-button-emphasis / --erp-letter-spacing-emphasis : no light-theme override needed */
}

/* ─────────────────────────────────────────────────────────────────────
 * S5 P1.7 — Tenant Theme Override contract (2026-05-16)
 *
 * UCP-FULL-20260516 / Slice 5. Spec: UI_TENANT_THEME_OVERRIDE.
 *
 * 黑金 (blackgold) 結構永遠是 base — canvas / surface / text / border
 * 一律不可被 tenant 覆蓋（per feedback_blackgold_brand_default 同源原則：
 * 品牌結構不被環境/租戶覆蓋）。Tenant 只能覆蓋【單一 accent token】，
 * 讓租戶識別色出現在 highlight / primary action / active state，
 * 不動骨架。
 *
 * Single overridable token:
 *   --erp-tenant-accent  (default = 黑金 gold-primary)
 *
 * Override mechanism (3 層，逐層收斂)：
 *   S5 (this) : 契約 + Branding 頁 color picker + 即時 contrast audit
 *               + scoped preview。**僅 preview，不跨頁套用**。
 *   S12       : 把現有直接引用 --erp-gold-primary 的 accent-class
 *               逐一改引 --erp-tenant-accent（token rewiring，全站）。
 *   S13 (保護區): backend tenant_theme table + _TenantLayout 在
 *               server-side 注入 :root{--erp-tenant-accent:<value>}。
 *
 * 不可被 tenant 覆蓋的 token（硬規則 — 結構/可讀性護欄）：
 *   --erp-black / --erp-card / --erp-surface* / --erp-border*
 *   --erp-text-* / 所有 status (success/warning/danger/info)
 *   理由：租戶亂設會破壞 AA 對比與骨架識別；只開放 accent 安全。
 *
 * Contrast guard: tenant accent 必須對 --erp-black (canvas) ≥ 3:1
 *   (large UI element / icon, per WCAG non-text contrast)；
 *   Branding 頁 JS 即時擋掉不過關的選色（見 branding.js computeContrast）。
 * ──────────────────────────────────────────────────────────────────── */
:root {
  --erp-tenant-accent: var(--erp-gold-primary);
}

/* ─────────────────────────────────────────────────────────────────────
 * S12 P3.2 — High-Contrast mode token coherence (2026-05-16)
 *
 * UCP-FULL-20260516 / Slice 12. 3-mode token model 收斂：
 *   dark   = :root（S4 baseline，260 tokens，黑金品牌預設）
 *   light  = body.theme-light（S4，手動 opt-in）
 *   HC     = body.ui-mode-high-contrast（本 block，token 層）
 *
 * 先前 HC 僅以 site.css component-level override 實作（18 處 legacy，
 * shrink-only），不在統一 token 模型 → 3-mode 不一致。本 block 補 HC
 * 的 token 層覆蓋，鏡像 S4 light pattern；site.css legacy HC 規則
 * 暫留（additive 不衝突，full teardown 屬 S15 cleanup，避免回歸）。
 *
 * HC 目標：AAA 對比（≥7:1）— 純黑底/純白字/亮金 accent/強邊框。
 * 與 light/dark 正交：HC 可疊在 dark 或 light 上（class 並存）。
 * ──────────────────────────────────────────────────────────────────── */
body.ui-mode-high-contrast {
  --erp-black: #000000;
  --erp-card: #0A0A0A;
  --erp-surface: #141414;
  --erp-surface-hover: #1F1F1F;
  --erp-border: #5A5A5A;
  --color-erp-context: var(--erp-surface);
  --erp-gold-light: #FFD970;
  --erp-gold-primary: #FFC233;
  --erp-gold-dark: #C8920A;
  --erp-success: #34D399;
  --erp-warning: #FBBF24;
  --erp-danger: #FF6B6E;
  --erp-info: #7DB8FF;
  --erp-text-primary: #FFFFFF;
  --erp-text-secondary: #EDEDED;
  --erp-text-muted: #C8C8C8;
  --erp-text-dim: #A8A8A8;
  --erp-focus-ring: 0 0 0 3px rgba(255, 217, 112, 0.75);
  --erp-ds-border-strong: #7A7A7A;
  --erp-ds-border-gold: rgba(255, 194, 51, 0.95);
  --erp-ds-bg-overlay: rgba(var(--erp-rgb-black), 0.88);
  --erp-ds-danger-text: #FFC9CA;
  --erp-ds-danger-text-strong: #FFFFFF;
  --bs-body-color: #FFFFFF;
  --bs-heading-color: #FFD970;
  --bs-link-color: #9FCBFF;
  --bs-link-hover-color: #C6E0FF;
  /* support-mode banner — HC: 亮橘 + 純白字（對比 ≥7:1）*/
  --erp-color-support-mode-banner-text: #FFFFFF;
}

/* HC + light 並存時：light 暖底改純白高對比 */
body.ui-mode-high-contrast.theme-light {
  --erp-black: #FFFFFF;
  --erp-card: #FFFFFF;
  --erp-surface: #F2F2F2;
  --erp-surface-hover: #E8E8E8;
  --erp-border: #5A5A5A;
  --color-erp-context: var(--erp-surface);
  --erp-text-primary: #000000;
  --erp-text-secondary: #1A1A1A;
  --erp-text-muted: #333333;
  --erp-text-dim: #4A4A4A;
  --erp-gold-primary: #8A5A00;
  --erp-gold-dark: #5C3D00;
  --bs-body-color: #000000;
  --bs-heading-color: #5C3D00;
  --erp-color-support-mode-banner-text: #000000;
}

/* ─────────────────────────────────────────────────────────────────────
 * Component-scoped sub-token declarations
 *
 * Moved from 02-shell.css 167-219 during Phase B-3 closure
 * (2026-05-27 audit). Rationale: 00-tokens.css is the canonical SoT
 * for color literals (Rule 1 exclusion); element-scoped sub-token
 * declarations should live here so all palette literals are co-located
 * with the rest of the token layer. 02-shell.css now carries only
 * layout properties on .erp-sidebar.
 *
 * NOT theme overrides (no body.theme-* selector) — Rule 7 only
 * constrains body.theme-* placement. Element-scoped CSS-variable
 * declarations on component classes are valid here.
 * ───────────────────────────────────────────────────────────────────── */

.erp-sidebar {
  --erp-sidebar-bg-start: rgba(9, 12, 18, 0.98);
  --erp-sidebar-bg-end: rgba(13, 18, 25, 0.96);
  --erp-sidebar-accent-rgb: var(--erp-rgb-nav-accent);
  --erp-sidebar-panel-rgb: 15, 19, 27;
  --erp-sidebar-panel-hover-rgb: 23, 29, 39;
  --erp-sidebar-text: #f3e6c9;
  --erp-sidebar-link-text: #fff1d0;
  --erp-sidebar-link-action: #d7c8aa;
  --erp-sidebar-text-muted: #c8bda4;
  --erp-sidebar-text-dim: #9f947d;
  --erp-sidebar-active-text: #211407;
  --erp-sidebar-active-action: #372109;
  --erp-sidebar-active-chip-bg: rgba(33, 20, 7, 0.12);
  --erp-sidebar-active-chip-border: rgba(33, 20, 7, 0.26);
  --erp-sidebar-active-start: #ffe0a0;
  --erp-sidebar-active-mid: #f0c36e;
  --erp-sidebar-active-end: #d9a64f;
}

.erp-sidebar--admin {
  --erp-sidebar-bg-start: rgba(7, 10, 16, 0.99);
  --erp-sidebar-bg-end: rgba(11, 17, 26, 0.97);
  --erp-sidebar-text: #f5e7c9;
  --erp-sidebar-link-text: #fff2d4;
  --erp-sidebar-link-action: #dbcdae;
  --erp-sidebar-text-muted: #cfc1a5;
  --erp-sidebar-text-dim: #a99b80;
  --erp-sidebar-active-start: #ffe2a8;
  --erp-sidebar-panel-rgb: 13, 18, 27;
  --erp-sidebar-panel-hover-rgb: 21, 28, 40;
}

.erp-sidebar--tenant {
  --erp-sidebar-bg-start: rgba(8, 11, 16, 0.99);
  --erp-sidebar-bg-end: rgba(12, 16, 23, 0.97);
  --erp-sidebar-text: #f4e4c5;
  --erp-sidebar-link-text: #fff0ce;
  --erp-sidebar-link-action: #d8c7a8;
  --erp-sidebar-text-muted: #cbbd9f;
  --erp-sidebar-text-dim: #9d9077;
  --erp-sidebar-panel-rgb: 14, 18, 25;
  --erp-sidebar-panel-hover-rgb: 24, 30, 40;
}

/* Nav-panel surface tones (consumed in 03-navigation.css) — 6 RGB
   triplets for dropdown / popper / breadcrumb surface depths. Naming
   reflects perceived darkness progression:
     -bg-deep        (8,10,14)     darkest, header strip scrim
     -surface        (16,21,29)    dropdown panel base
     -surface-alt    (20,25,33)    select-dropdown variant
     -surface-hover  (22,28,37)    interactive hover state
     -panel          (14,18,24)    popover panel
     -text-dim-cream (240,222,187) low-opacity text on nav surface */
:root {
  --erp-rgb-nav-bg-deep: 8, 10, 14;
  --erp-rgb-nav-surface: 16, 21, 29;
  --erp-rgb-nav-surface-alt: 20, 25, 33;
  --erp-rgb-nav-surface-hover: 22, 28, 37;
  --erp-rgb-nav-panel: 14, 18, 24;
  --erp-rgb-nav-text-dim-cream: 240, 222, 187;
  /* Shell surface triplets — topbar / public-header / mobile-menu / mobile-
     drawer backgrounds. The -bg-start / -bg-end pair shares RGB with the
     .erp-sidebar sub-tokens above so a single hue change cascades through
     the shell. -mobile-menu is a one-off menu-button surface. */
  --erp-rgb-shell-bg-start: 9, 12, 18;
  --erp-rgb-shell-bg-end: 13, 18, 25;
  --erp-rgb-shell-mobile-menu: 18, 24, 33;
  /* Admin-page accent triplets — consumed by .admin-rule-card (04-surfaces)
     and .admin-alert-item.is-{info|warning|danger} (09-status). Bright
     alert variants intentionally diverge from base --erp-rgb-{info|warning|
     danger}: admin alerts are visually louder than tenant-side ones. */
  --erp-rgb-admin-card: 18, 14, 10;
  --erp-rgb-admin-alert-bg: 14, 12, 10;
  --erp-rgb-admin-alert-info: 77, 163, 255;
  --erp-rgb-admin-alert-warning: 255, 186, 84;
  --erp-rgb-admin-alert-danger: 235, 103, 103;
}