/* Corelong global design system. Brand primitives live only in this file. */
:root {
--oc-gold:var(--brand-gold);--sc-gold:var(--brand-gold);--cm-gold:var(--brand-gold);--cm-ink:var(--text-heading);--cm-line:var(--border-default);--cm-muted:var(--text-body);
 --brand-navy:#061F32; --brand-navy-light:#0B2A42;
 --brand-gold:#D9B675; --brand-gold-light:#F0D39C; --brand-gold-ink:#80602B;
 --bg-primary:#FFFFFF; --bg-secondary:#FAF9F6; --bg-soft:#EEF3F5; --bg-gold:#F8F0E2;
 --text-heading:var(--brand-navy); --text-body:#597187; --text-secondary:#607487;
 --text-on-dark:#FFFFFF; --text-on-dark-soft:#E3EBF1; --text-on-gold:var(--brand-navy);
 --border-default:#E6EBEF; --border-gold:#CDA65F; --border-strong:#BACAD5;
 --status-error:#A33434; --status-success:#276247; --mask-ink:#000000;
 --font-heading:Georgia,"Noto Serif CJK SC","Songti SC",SimSun,serif;
 --font-body:Arial,"Helvetica Neue","Microsoft YaHei",sans-serif;
 --type-brand:clamp(32px,3vw,60px); --type-hero:clamp(40px,4.4vw,76px); --type-page:clamp(38px,4vw,64px);
 --type-section:clamp(32px,3vw,48px); --type-h3:clamp(24px,2vw,30px);
 --type-card:20px; --type-body-large:clamp(18px,1.05vw,20px); --type-body:16px; --type-description:14px;
 --type-button:16px; --type-eyebrow:12px;
 --radius-button:999px; --radius-card:16px;
 --transition-fast:200ms ease; --transition-normal:280ms cubic-bezier(.22,1,.36,1);
 --motion-ease-premium:cubic-bezier(.22,1,.36,1);
 --motion-fast:200ms; --motion-normal:350ms; --motion-slow:650ms;
 --motion-hover-lift:-6px; --motion-reveal-distance:32px; --motion-image-scale:1.04;
 --shadow-card:0 10px 28px rgb(6 31 50 / .08); --shadow-hover:0 16px 36px rgb(6 31 50 / .15);
 --focus-ring:var(--brand-gold-ink);
 --navy-900:var(--brand-navy); --navy-800:var(--brand-navy-light); --navy-700:var(--brand-navy-light);
 --gold-500:var(--brand-gold); --gold-400:var(--brand-gold-light); --cream-50:var(--bg-secondary); --white:var(--bg-primary);
 --text-light:var(--text-on-dark-soft); --text-muted:var(--text-on-dark-soft); --border-light:color-mix(in srgb,var(--bg-primary) 24%,transparent);
 --brand-font-display:var(--font-heading); --brand-font-body:var(--font-body); --brand-motion:var(--transition-normal);
 --button-navy:var(--brand-navy); --button-gold:var(--brand-gold); --button-gold-light:var(--brand-gold-light); --button-font:var(--font-body); --button-ease:cubic-bezier(.22,1,.36,1);
 --cl-ink:var(--text-heading);
 --cl-navy:var(--brand-navy);
 --cl-gold:var(--brand-gold);
 --cl-gold-soft:var(--brand-gold-light);
 --cl-muted:var(--text-body);
 --cl-line:var(--border-default);
 --cl-paper:var(--bg-secondary);
 --cl-mist:var(--bg-soft);
 --cl-warm:var(--bg-secondary);
 --cl-display-type:var(--type-section);
 --cl-body-type:var(--type-body);
 --cl-meta-type:var(--type-description);
 --navy:var(--brand-navy);
 --ink:var(--text-heading);
 --gold:var(--brand-gold);
 --paper:var(--bg-secondary);
 --soft:var(--bg-soft);
 --text:var(--text-body);
 --muted:var(--text-body);
 --line:var(--border-default);
 --serif:var(--font-heading);
 --ab-serif:var(--font-heading);
 --ct-navy:var(--brand-navy-light);
 --ct-deep:var(--brand-navy);
 --ct-gold:var(--brand-gold);
 --ct-ink:var(--text-heading);
 --ct-muted:var(--text-body);
 --ct-line:var(--border-default);
 --ct-paper:var(--bg-secondary);
 --pn-navy:var(--brand-navy);
 --pn-ink:var(--text-heading);
 --pn-gold:var(--brand-gold);
 --pn-text:var(--text-body);
 --pn-line:var(--border-default);
 --pn-paper:var(--bg-secondary);
 --cp-navy:var(--brand-navy);
 --cp-ink:var(--text-heading);
 --cp-gold:var(--brand-gold);
 --cp-paper:var(--bg-secondary);
 --fp-ink:var(--text-heading);
 --fp-blue:var(--brand-navy-light);
 --fp-muted:var(--text-body);
 --sc-ink:var(--text-heading);
 --sc-blue:var(--brand-navy-light);
 --sc-muted:var(--text-body);
 --oc-ink:var(--text-heading);
 --oc-blue:var(--brand-navy-light);
 --oc-muted:var(--text-body);
}

/* Typography roles apply to every locale; CJK uses the same role with local fallbacks. */
html body { font-family:var(--font-body); font-size:var(--type-body); line-height:1.65; color:var(--text-body); background:var(--bg-primary); }
html body :is(h1,h2) { font-family:var(--font-heading)!important; font-weight:500!important; letter-spacing:-.035em; color:var(--text-heading); }
html body h1 { font-size:var(--type-page)!important; line-height:1.12!important; }
html body h2 { font-size:var(--type-section)!important; line-height:1.16!important; }
html body .cl-hero-copy h1 { font-size:var(--type-hero)!important; line-height:1.08!important; }
html body h3 { font-family:var(--font-body); font-size:var(--type-h3); font-weight:600; line-height:1.25; color:var(--text-heading); }
html body :is(.cl-tech-copy,.cl-solution-copy,.cl-catalog-card-copy,.sc-copy,.oc-copy,.oc-feature,.cp-card,.ab-tech-grid article,.ab-adv-grid article,.ab-facilities article,.sol-custom-grid article,.sol-proof-grid article,.sol-process article) h3 { font-family:var(--font-body)!important; font-size:var(--type-card)!important; font-weight:600!important; line-height:1.3!important; color:var(--text-heading)!important; }
html body :is(.cl-intro-copy,.cl-section-head,.cl-oem-copy,.cl-tech-copy,.cl-catalog-card-copy,.sc-copy,.oc-copy,.cp-card,.ab-section,.sol-section-head,.sol-integrated-copy,.sol-body,.pn-lead,.pn-card-copy,.ct-form-panel,.product-section) p { font-size:var(--type-body)!important; line-height:1.65!important; color:var(--text-body); }
html body :is(.cl-tech-copy,.cl-catalog-card-copy,.sc-copy,.oc-copy,.cp-card,.ab-tech-grid article,.ab-facilities article) p { font-size:var(--type-description)!important; line-height:1.5!important; color:var(--text-body)!important; }
html body :is(.cl-eyebrow,.cl-product-eyebrow,.cp-eyebrow,.sol-eyebrow,.ab-index,.ab-kicker,.pn-eyebrow,.ct-kicker) { font-family:var(--font-body); font-size:var(--type-eyebrow)!important; font-weight:600; line-height:1.4; color:var(--brand-gold-ink); }
/* Theme is assigned by surface, never by language or a blanket white-text rule. */
html body :is(.cl-hero,.cl-final-cta,.cl-product-hero,.cl-category-hero,.cl-product-cta,.ab-hero,.ab-vision,.ab-world,.ab-core,.ct-intro,.cp-stage) { color:var(--text-on-dark); }
html body :is(.cl-hero,.cl-final-cta,.cl-product-hero,.cl-category-hero,.cl-product-cta,.ab-hero,.ab-vision,.ab-world,.ab-core,.ct-intro,.cp-stage) :is(h1,h2,h3) { color:var(--text-on-dark)!important; }
html body :is(.cl-hero,.cl-final-cta,.cl-product-hero,.cl-category-hero,.cl-product-cta,.ab-hero,.ab-vision,.ab-world,.ab-core,.ct-intro,.cp-stage) :is(p,.cl-eyebrow,.cl-product-eyebrow,.sol-eyebrow,.ab-kicker,.ct-kicker) { color:var(--text-on-dark-soft)!important; }
html body :is(.cl-hero,.cl-final-cta,.cl-product-hero,.cl-category-hero,.cl-product-cta,.ab-hero,.ab-vision,.ab-world,.ab-core,.ct-intro,.cp-stage) :is(em,.ab-gold) { color:var(--brand-gold-light)!important; }
html body :is(.cl-hero-lead,.cp-description,.ct-lead,.sol-lead,.ab-lead) { font-size:var(--type-body-large)!important; line-height:1.65!important; }
html body :is(.cl-hero-note,.cp-proof,.ct-note,.cl-footer-tagline,.cl-footer-links a,.cl-footer-bottom) { font-size:var(--type-description)!important; line-height:1.5; }
html body .cp-title { font-size:var(--type-brand)!important; }
html body .cp-description { max-width:660px; letter-spacing:.025em; }
html body .cp-proof { letter-spacing:0; }
html body .cp-eyebrow { color:var(--text-on-dark)!important; letter-spacing:.2em; }
html body .cp-card { background:var(--bg-primary); border-color:var(--border-default); border-radius:var(--radius-card); }
/* White navigation and the gold consultation CTA match reference 2. */
html body header { background:var(--bg-primary); }
html body .cl-nav-links>li>a { font:500 var(--type-body)/1.4 var(--font-body); color:var(--brand-navy-light); }
html body .cl-nav-links>li:is(:hover,.is-current)>a { color:var(--brand-navy); }
html body .cl-nav-links>li.is-current>a::after { background:var(--brand-gold); }
html body :is(.cl-mobile-panel,.cl-mega-menu,.cl-lang-list) { color:var(--text-heading); background:var(--bg-primary); border-color:var(--border-default); }
html body .cl-mobile-panel :is(a,summary) { color:var(--text-heading); font-family:var(--font-body); }
html body :is(.fp-card,.sc-card,.oc-card,.cl-catalog-card) { border-color:var(--border-default); }
html body :is(.fp-card,.sc-card,.oc-card,.cl-catalog-card):is(:hover,:focus-within) { border-color:var(--border-gold); }
html body :is(.fp-badge,.sc-badge,.oc-category,.cl-catalog-card-type,.cl-catalog-card-badge) { color:var(--text-heading); background:var(--bg-gold); }
html body :is(.fp-icon-button,.sc-icon-button,.oc-icon-button,.fp-dialog-close) { color:var(--text-heading); }
/* Legacy listing/detail and CMS rich text share the same public typography. */
html body :is(.rich-text,.product-section,.article-content-inner,.list-product-main) { color:var(--text-body); font-family:var(--font-body); }
html body :is(.rich-text,.product-section,.article-content-inner) :is(p,li,td) { color:var(--text-body); font-size:var(--type-body); line-height:1.65; }
html body :is(.list-product-item,.recommend-item) :is(h1,h3,.title) { color:var(--text-heading); font-family:var(--font-body)!important; font-size:var(--type-card)!important; }
html body :is(.buy-nav,.cl-product-jump,.foxui-breadcrumb) a { color:var(--text-heading); }
html body :is(.buy-nav,.cl-product-jump) .active { color:var(--text-heading); border-color:var(--brand-gold); }
html body :is(.enquiry-label,.cl-product-view-all,.sol-scene-copy em) { color:var(--text-heading); }
html body :is(input,textarea,select) { font-family:var(--font-body); font-size:var(--type-body); color:var(--text-heading); border-color:var(--border-strong); }
html body :is(input,textarea)::placeholder { color:var(--text-secondary); opacity:1; }
html body :is(input,textarea,select):focus { border-color:var(--brand-gold-ink); outline:2px solid var(--brand-gold-ink); outline-offset:2px; }
html body :is(input,textarea,select)[aria-invalid="true"] { border-color:var(--status-error); }
html body .foxui-form-tip { color:var(--status-error); font-size:var(--type-description); }
html body :is(a,button,summary,[tabindex]):focus-visible { outline:2px solid var(--focus-ring); outline-offset:4px; }
html body :is(.cp-stage,.cl-hero,.ab-hero,.ab-vision,.cl-product-cta,.ct-intro) { --focus-ring:var(--brand-gold-light); }
html body :is(.ct-form-panel,.fp-dialog,.cl-mobile-panel) { --focus-ring:var(--brand-gold-ink); }
html body footer :is(.cl-footer-tagline,.cl-footer-links a,.cl-footer-bottom) { color:var(--text-body)!important; }
@media(max-width:767px) {
 html body .cp-title>span { white-space:normal; }
 html body .cp-title { font-size:var(--type-section)!important; }
 html body .cp-copy { max-width:100%; }
 html body .cp-eyebrow { letter-spacing:.12em; }
 html body .cp-description { font-size:var(--type-body)!important; }
}
@media(prefers-reduced-motion:reduce) { html body [data-brand-button],html body [data-brand-button] * { transition:none!important; animation:none!important; } }

/* Match legacy selector specificity so no module can redefine a typography role. */
html:root body.corelong-home .cl-hero-copy h1 { font-size:var(--type-hero)!important; line-height:1.08!important; }
html:root body.corelong-home :is(#products,#solutions,#oem) h2 { font-size:var(--type-section)!important; line-height:1.16!important; font-weight:500!important; }
html:root body.corelong-home :is(#products,#solutions,#oem) h3 { font-family:var(--font-body)!important; font-size:var(--type-card)!important; line-height:1.3!important; }
html:root body.corelong-home :is(#products,#solutions,#oem) p { font-family:var(--font-body)!important; }
html:root body.corelong-home #solutions .sc-copy p,html:root body.corelong-home #oem .oc-benefit p { font-size:var(--type-description)!important; line-height:1.5!important; }
html:root body.corelong-home .cl-hero-copy .cl-eyebrow { font-size:var(--type-eyebrow)!important; }
html:root body.corelong-home .cl-hero-lead { font-size:var(--type-body-large)!important; }
html:root body.corelong-home .cl-hero-note { font-size:var(--type-description)!important; }
html:root.brand-buttons body [data-brand-button="navy"] { background:var(--brand-navy)!important; color:var(--text-on-dark)!important; }
html:root.brand-buttons body [data-brand-button="outline"] { background:transparent!important; }
html:root.brand-buttons body [data-brand-button="primary"] { background:var(--brand-gold)!important; color:var(--text-on-gold)!important; }
@media(hover:hover) and (pointer:fine) {
 html:root.brand-buttons body [data-brand-button="primary"]:hover { background:var(--brand-gold-light)!important; }
 html:root.brand-buttons body [data-brand-button="navy"]:hover { background:var(--brand-navy-light)!important; }
 html:root.brand-buttons body [data-brand-button="outline"]:hover { background:var(--brand-gold)!important; color:var(--text-on-gold)!important; }
}

html:root body :is(h1,h2) { color:var(--text-heading); }
html:root body .sol-hero h1 { color:var(--text-heading)!important; }
/* Footer social buttons and navigation retain readable text at every breakpoint. */
html:root body .cl-footer-links a:hover { color:var(--brand-navy)!important; }

html body .cp-partner .cp-inner { max-width:1720px; }
@media(max-width:480px) { html body .cl-wordmark { display:none; } html body .cl-nav-logo { min-width:0; } }

html body .cl-catalog-card-copy>b { font:600 var(--type-card)/1.3 var(--font-body); color:var(--text-heading); }
html body .cl-catalog-card-description { font:400 var(--type-description)/1.5 var(--font-body); color:var(--text-body); }
html body .cl-catalog-card-actions { display:flex; flex-wrap:wrap; gap:6px; }
html:root.brand-buttons body .cl-catalog-card-actions [data-brand-button] { font-size:var(--type-description)!important; }
html body .cl-nav-links>li>a { white-space:nowrap; }

html body .recommend-list>.title h1 { font-size:var(--type-section)!important; }
html body .list-case-item .cover { background:linear-gradient(180deg,transparent,color-mix(in srgb,var(--brand-navy) 92%,transparent)); }
html body .list-case-item .cover :is(h2,h3) { font-family:var(--font-body)!important; font-size:var(--type-card)!important; line-height:1.3!important; color:var(--text-on-dark)!important; }
html body .list-case-item .cover p { color:var(--text-on-dark-soft); font-size:var(--type-description); }
html body .foxui-breadcrumb { color:var(--text-body); font-size:var(--type-description); }
html body .foxui-solid-primary:not([data-brand-button]) { background:var(--brand-navy); color:var(--text-on-dark); }
html body :is(.list-pagination-pc,.list-pagination-h5) .active { color:var(--text-heading); background:var(--bg-gold); border-color:var(--border-gold); }

html body .cp-partner .cp-description { max-width:660px; }
html body .cp-partner .cp-card { background:var(--bg-primary); border-color:var(--border-default); border-radius:var(--radius-card); }

html body .sol-scene-copy strong { font:600 var(--type-card)/1.3 var(--font-body); color:var(--text-heading); }
html body :is(.sol-scene-copy small,.sol-process p,.sol-custom-grid p,.sol-proof-grid p,.ab-process p,.cl-capability small) { font-size:var(--type-description)!important; line-height:1.5!important; color:var(--text-body); }
html body .cl-capability b { font:600 var(--type-card)/1.3 var(--font-body); color:var(--text-heading); }
html body .cl-intro-proof-item:hover .cl-intro-proof-icon { color:var(--brand-gold-light); }

/* CMS rich text and FoxUI utilities inherit the public brand, even on legacy routes. */
html body .rich-text :is(p,li,td) { font-family:var(--font-body)!important; font-size:var(--type-body)!important; line-height:1.65!important; color:var(--text-body)!important; }
html body .rich-text :is(p,li,td) :is(span,strong,em) { font-family:inherit!important; color:inherit!important; }
html body .rich-text :is(h1,h2) { color:var(--text-heading)!important; }
html body .foxui-color-primary { color:var(--text-heading)!important; }
html body .foxui-bg-primary { background-color:var(--brand-navy)!important; color:var(--text-on-dark)!important; }
html body .foxui-bg-lighter { background-color:var(--bg-secondary)!important; }

html body :is(input,textarea,select):user-invalid { border-color:var(--status-error); outline-color:var(--status-error); }
html body :is(input,textarea,select):disabled { background:var(--bg-soft); color:var(--text-secondary); cursor:not-allowed; }

html body [data-brand-icon] { color:var(--text-heading); }
html body [data-brand-icon] svg { display:block; width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:1.65; stroke-linecap:round; stroke-linejoin:round; }