/* FusionCharge shared UI layer (fc-ui.css), WP0 of the Nov 2026 wiki unify plan (§3, design-token bridge).
*
* The approved home's design language (css/home-ac.css: white paper, thin VI-red rules, mono numerals,
* square-ish 3 px corners) turned into site-wide --fc-* tokens plus a component layer that restyles the
* classes js/render.js already emits. No new markup is needed for any rule below the token block.
*
* SOURCE = the customer wiki's css/fc-ui.css. The partner beta and the prod fork hold VERBATIM copies
* (sync, don't retype). Load order in every tree: css/wiki.css -> css/fc-ui.css -> everything else, so
* wiki.css is outranked at equal specificity and every page/partner stylesheet still outranks this file.
*
* Brand: Huawei only as words. No logo, no petal, no #E60012. #E9002F lives only in --fc-red-hot.
* Guarded by the ui-tokens gate.
*/
:root {
/* VI palette (design-system/tokens/colors.css, 2026-11-03) */
--fc-red: #C7000B; --fc-red-deep: #A5000A; --fc-red-hot: #E9002F; --fc-grey: #595757;
--fc-ink: #000; --fc-ink2: #2E2E2C; --fc-ink3: #5F5F5D; --fc-ink4: #666664;
--fc-paper: #FFFFFF; --fc-mist: #F6F6F4;
--fc-rule: #DCDCD8; --fc-rule-soft: #ECECE9; --fc-bar: #CFCFCB; --fc-tint: #FBE9EA;
--fc-sans: 'Hanken Grotesk', 'Noto Sans Thai', Arial, system-ui, sans-serif;
--fc-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
--fc-radius: 3px;
/* accent hooks: partner themes override through the EXISTING --p-* API, never new vars.
The customer tree defines no --p-*, so all four fall back to VI red. */
--fc-accent: var(--p-primary, var(--fc-red)); /* fills, rules, active bars */
--fc-accent-ink: var(--p-accent-on-surface, var(--fc-red)); /* text/links on white (contrast-guarded) */
--fc-on-accent: var(--p-on-primary, #fff);
--fc-accent-soft: var(--p-primary-soft, var(--fc-tint));
}
html[data-lang="th"] { --fc-sans: 'Noto Sans Thai', 'Hanken Grotesk', Arial, system-ui, sans-serif; }
/* =====================================================================================================
* COMPONENT LAYER
* Every selector sits under :where(.page:not(:has(.hac-hero))) — "a page body that is not the approved
* home". :where() adds no specificity, so each rule weighs exactly what the wiki.css rule it restyles
* weighs and wins only by load order. The approved home (#page.page-home with .hac-hero inside) is left
* to home-ac.css untouched. A browser without :has() drops these rules and shows the old look.
* Visual only: colour, border, radius, type. No grid, width or padding changes (no layout change).
* ===================================================================================================== */
/* ---------- page head + section head (the .hac-h2 editorial head) ---------- */
:where(.page:not(:has(.hac-hero))) .eyebrow { color: var(--fc-accent-ink); }
:where(.page:not(:has(.hac-hero))) h1.page-title { font-weight: 700; letter-spacing: -0.03em; color: var(--fc-ink); }
:where(.page:not(:has(.hac-hero))) .page-intro { color: var(--fc-ink3); }
:where(.page:not(:has(.hac-hero))) h2.sec-h {
border-left: 0; padding-left: 0; padding-bottom: 8px; border-bottom: 1px solid var(--fc-ink);
font-weight: 700; letter-spacing: -0.025em; color: var(--fc-ink);
}
html[data-lang="th"] :where(.page:not(:has(.hac-hero))) h2.sec-h,
html[data-lang="th"] :where(.page:not(:has(.hac-hero))) h1.page-title { letter-spacing: 0; }
:where(.page:not(:has(.hac-hero))) .prose p,
:where(.page:not(:has(.hac-hero))) .prose ul { color: var(--fc-ink2); }
/* new primitive (WP0): editorial section head =