/* =========================================================
   Belz Calibration Laboratory — UI styles + "Read more"
   Loaded last. Three parts:

     1. Read more   — long text is clamped behind a button (every style).
     2. Legibility  — low-contrast greys lifted (every style, incl. Classic).
     3. UI styles   — <html data-ui="…" class="ui-t"> re-skins the site from a
                      small set of tokens. "classic" carries no class, so the
                      original navy & gold look is left exactly as it was.

   The style is chosen by the super admin in BelzOne → Settings → Website
   Content Editor → UI Style (general.ui_style). The list of ids lives in
   assets/data/ui-styles.json; add a style there AND a token block below.
   Every token pair is contrast-checked by tools/check-ui-contrast.js.
   ========================================================= */

/* ═════════════ 1. READ MORE ═════════════ */
.rm-clamp {
  display: -webkit-box; -webkit-box-orient: vertical;
  -webkit-line-clamp: var(--rm-lines, 2); line-clamp: var(--rm-lines, 2); overflow: hidden;
}
.rm-clamp.rm-open { display: block; -webkit-line-clamp: unset; line-clamp: unset; overflow: visible; }
.rm-extra { display: none !important; }
.rm-extra.rm-open { display: flex !important; animation: rmIn 0.3s ease; }
@keyframes rmIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.rm-has { margin-bottom: 4px !important; }
.rm-btn {
  display: flex; width: fit-content; align-items: center; gap: 5px; margin: 2px 0 14px; padding: 2px 0;
  font-family: var(--ff-body); font-size: 12.5px; font-weight: 700; letter-spacing: 0.2px;
  color: var(--accent2); border-bottom: 1px solid transparent; transition: border-color 0.2s, opacity 0.2s;
}
.rm-btn::after { content: '›'; font-size: 15px; line-height: 1; transition: transform 0.25s; }
.rm-btn[aria-expanded="true"]::after { transform: rotate(90deg); }
.rm-btn:hover { border-bottom-color: currentColor; }
.rm-btn:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; border-radius: 3px; }
.rm-btn[hidden] { display: none; }
.section-header .rm-btn { margin-left: auto; margin-right: auto; }
.hero .rm-btn { margin-bottom: 26px; font-size: 13.5px; }
.hero .rm-btn, .dark-section .rm-btn, .footer .rm-btn, .service-card.featured .rm-btn, .scope-search .rm-btn { color: var(--gold); }
.footer .rm-btn { margin-bottom: 0; }

/* ═════════════ 2. LEGIBILITY (all styles) ═════════════
   The original greys sat at 2–3:1 against their backgrounds. These lift every
   one of them to at least 4.5:1 without changing the look. */
:root { --gray-text: #56647F; }            /* was #6B7A99 — 4.3:1 on the off-white panels */
.section-tag { color: #7A5F0A; border-color: rgba(122,95,10,0.35); }
.dark-section .section-tag, .hero .section-tag { color: var(--gold); border-color: rgba(212,175,55,0.3); }
.logo-sub { color: rgba(255,255,255,0.72); }
.stat-label { color: rgba(255,255,255,0.74); }
.dark-section .section-desc { color: rgba(255,255,255,0.72) !important; }
.cert-label { color: rgba(255,255,255,0.7); }
.spec span { color: rgba(255,255,255,0.68); }
.form-group label { color: rgba(255,255,255,0.74); }
.form-group input::placeholder, .form-group textarea::placeholder { color: rgba(255,255,255,0.52); }
.scope-search input::placeholder { color: rgba(255,255,255,0.58); }
.instrument-label, .hero-scroll { color: rgba(255,255,255,0.68); }
.dial-label { color: rgba(255,255,255,0.62); }
.nabl-text-sub { color: rgba(255,255,255,0.7); }
.footer-brand p { color: rgba(255,255,255,0.72); }
.footer-logo-sub { color: rgba(255,255,255,0.68); }
.footer-col ul li a { color: rgba(255,255,255,0.74); }
.footer-bottom-inner p, .footer-bottom-links { color: rgba(255,255,255,0.66); }
.social-link { color: rgba(255,255,255,0.74); }
.service-link { color: #005FA3; }

/* ═════════════ 3. UI STYLES ═════════════ */

/* ── 3a. Derived tokens: a style only has to state its palette ── */
html.ui-t {
  /* dark surfaces */
  --dk-ink: #FFFFFF; --dk-text: rgba(255,255,255,0.84); --dk-muted: rgba(255,255,255,0.76);
  --dk-card: rgba(255,255,255,0.05); --dk-card-hi: rgba(255,255,255,0.09);
  --dk-line: rgba(255,255,255,0.14); --dk-input: rgba(255,255,255,0.07);
  --dk-chip: rgba(var(--pri-rgb), 0.14); --dk-acc-line: rgba(var(--pri-rgb), 0.40);
  /* light surfaces */
  --chip: rgba(var(--pri-rgb), 0.12); --tag-line: rgba(var(--pri-rgb), 0.45);
  --pri-l: var(--pri); --on-pri-l: var(--on-pri);
  /* hero (text over the photograph / video) */
  --hero-bg: var(--dk-bg);
  --hero-ov: linear-gradient(100deg, rgba(var(--ov-rgb),0.97) 0%, rgba(var(--ov-rgb),0.90) 42%, rgba(var(--ov-rgb),0.70) 78%, rgba(var(--ov-rgb),0.62) 100%);
  --hero-ink: var(--dk-ink); --hero-text: var(--dk-text); --hero-muted: var(--dk-muted); --hero-acc: var(--dk-acc);
  --hero-grad: linear-gradient(120deg, var(--pri), var(--sec));
  --hero-chip: rgba(var(--pri-rgb), 0.10); --hero-chip-line: rgba(var(--pri-rgb), 0.34);
  --hero-chip2: rgba(255,255,255,0.06); --hero-line: rgba(255,255,255,0.36); --hero-line2: rgba(255,255,255,0.14);
  --canvas-op: 0.55; --grid-op: 1;
  /* navbar once scrolled, mobile drawer */
  --nav-bg: var(--dk-solid); --nav-ink: var(--dk-ink); --nav-text: var(--dk-text); --nav-muted: var(--dk-muted); --nav-acc: var(--dk-acc);
  --nav-shadow: 0 2px 20px rgba(0,0,0,0.28);
  --drawer-bg: var(--dk-solid);
  /* stats strip, featured card, scope-search box */
  --stats-bg: var(--dk-bg); --stats-ink: var(--dk-ink); --stats-muted: var(--dk-text); --stats-line: var(--dk-line);
  --feat-bg: var(--dk-bg); --feat-ink: #FFFFFF; --feat-text: rgba(255,255,255,0.84); --feat-muted: rgba(255,255,255,0.82);
  --feat-acc: var(--dk-acc); --feat-line: rgba(var(--pri-rgb), 0.38);
  --feat-badge-bg: var(--pri); --feat-badge-ink: var(--on-pri);
  /* buttons, bars */
  --btn-bg: var(--pri); --btn-shadow: 0 6px 20px rgba(var(--pri-rgb), 0.32);
  --bar: linear-gradient(90deg, var(--pri), var(--sec));
  /* footer always sits on its own dark photograph */
  --foot-bg: #07090E;
  --foot-ov: linear-gradient(to bottom, rgba(6,8,13,0.90) 0%, rgba(6,8,13,0.76) 45%, rgba(6,8,13,0.93) 100%);
  --foot-acc: var(--dk-acc);
  /* shape & type */
  --r-card: 12px; --r-btn: 6px; --head-ls: 0px; --head-tt: none; --head-w: 700;

  /* the original variable names follow the tokens, so anything not restated
     below (chat widget, media placeholders) re-skins with the rest */
  --navy: var(--ink); --navy-mid: var(--ink); --dark-bg: var(--dk-solid);
  --gold: var(--pri); --gold-light: var(--pri-hi); --accent: var(--sec); --accent2: var(--link);
  --off-white: var(--surface); --gray-light: var(--line); --gray-text: var(--muted); --dark-text: var(--text);
  --shadow: 0 4px 24px rgba(15,23,42,0.10); --shadow-lg: 0 12px 40px rgba(15,23,42,0.16);
}

/* ── 3b. The site, restated in tokens ── */
html.ui-t body { color: var(--text); background: var(--bg); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
html.ui-t .section-title, html.ui-t .hero-title, html.ui-t .service-title, html.ui-t .product-name,
html.ui-t .stat-num, html.ui-t .footer-col h5, html.ui-t .logo-main, html.ui-t .footer-logo-main {
  letter-spacing: var(--head-ls); text-transform: var(--head-tt);
}
html.ui-t .section-title { color: var(--ink); font-weight: var(--head-w); }
html.ui-t .section-desc { color: var(--muted); }
html.ui-t .section-tag { color: var(--tag); border-color: var(--tag-line); border-radius: var(--r-btn); }
html.ui-t .dark-section .section-tag { color: var(--dk-acc); border-color: var(--dk-acc-line); }

html.ui-t .btn-primary { background: var(--btn-bg); color: var(--on-pri); border-radius: var(--r-btn); box-shadow: var(--btn-shadow); }
html.ui-t .btn-primary:hover { box-shadow: 0 10px 28px rgba(var(--pri-rgb), 0.42); filter: brightness(1.06); }
html.ui-t .btn-ghost { border-color: var(--hero-line); color: var(--hero-ink); border-radius: var(--r-btn); }
html.ui-t .btn-ghost:hover { border-color: var(--hero-acc); color: var(--hero-acc); }
html.ui-t .btn-primary:focus-visible, html.ui-t .btn-ghost:focus-visible, html.ui-t .btn-login:focus-visible,
html.ui-t .nav-link:focus-visible { outline: 2px solid var(--sec); outline-offset: 3px; }
html.ui-t .rm-btn { color: var(--link); }
html.ui-t .hero .rm-btn { color: var(--hero-acc); }
html.ui-t .dark-section .rm-btn { color: var(--dk-acc); }
html.ui-t .footer .rm-btn { color: var(--foot-acc); }
html.ui-t .service-card.featured .rm-btn, html.ui-t .scope-search .rm-btn { color: var(--feat-acc); }

/* navbar: over the hero it takes the hero's ink, once scrolled its own */
html.ui-t .logo-main { color: var(--hero-ink); }
html.ui-t .logo-sub { color: var(--hero-muted); }
html.ui-t .nav-links li a.nav-link { color: var(--hero-text); }
html.ui-t .nav-links li a.nav-link:hover, html.ui-t .nav-links li a.nav-link.active { color: var(--hero-ink); }
html.ui-t .nav-links li a.nav-link::after { background: var(--hero-acc); }
html.ui-t .nav-toggle span { background: var(--hero-ink); }
html.ui-t .navbar.scrolled { background: var(--nav-bg); box-shadow: var(--nav-shadow); }
html.ui-t .navbar.scrolled .logo-main { color: var(--nav-ink); }
html.ui-t .navbar.scrolled .logo-sub { color: var(--nav-muted); }
html.ui-t .navbar.scrolled .nav-links li a.nav-link { color: var(--nav-text); }
html.ui-t .navbar.scrolled .nav-links li a.nav-link:hover, html.ui-t .navbar.scrolled .nav-links li a.nav-link.active { color: var(--nav-ink); }
html.ui-t .navbar.scrolled .nav-links li a.nav-link::after { background: var(--nav-acc); }
html.ui-t .navbar.scrolled .nav-toggle span { background: var(--nav-ink); }
html.ui-t .nav-toggle.open span { background: var(--dk-ink) !important; }
html.ui-t .btn-login { background: var(--btn-bg); color: var(--on-pri); border-radius: var(--r-btn); }
html.ui-t .btn-login:hover { background: var(--btn-bg); filter: brightness(1.08); }
html.ui-t #mobileDrawer { background: var(--drawer-bg); }
html.ui-t #mobileDrawer a { color: var(--dk-ink); border-color: var(--dk-line); }
html.ui-t #mobileDrawer a:hover { color: var(--dk-acc); }

/* hero */
html.ui-t .hero { background: var(--hero-bg); }
html.ui-t .hero-photo::after { background: var(--hero-ov); }
html.ui-t #heroCanvas { opacity: var(--canvas-op); }
html.ui-t .hero-grid-overlay { opacity: var(--grid-op); }
html.ui-t .hero-badge { background: var(--hero-chip); border-color: var(--hero-chip-line); color: var(--hero-acc); border-radius: var(--r-btn); }
html.ui-t .badge-dot { background: var(--hero-acc); }
html.ui-t .hero-title { color: var(--hero-ink); }
html.ui-t .gradient-text { background: var(--hero-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
html.ui-t .hero-desc { color: var(--hero-text); }
html.ui-t .certbadge { background: var(--hero-chip2); border-color: var(--hero-line2); color: var(--hero-text); border-radius: var(--r-btn); }
html.ui-t .instrument-label, html.ui-t .hero-scroll { color: var(--hero-muted); }
html.ui-t .instrument-label strong { color: var(--hero-acc); }
html.ui-t .scroll-line { background: linear-gradient(to bottom, var(--hero-acc), transparent); }

/* line-art icons were drawn in the original gold */
html.ui-t [stroke="#D4AF37"] { stroke: var(--dk-acc); }
html.ui-t [fill="#D4AF37"] { fill: var(--dk-acc); }
html.ui-t .hero [stroke="#D4AF37"] { stroke: var(--hero-acc); }
html.ui-t .hero [fill="#D4AF37"] { fill: var(--hero-acc); }
html.ui-t .section:not(.dark-section) [stroke="#D4AF37"] { stroke: var(--tag); }
html.ui-t .section:not(.dark-section) [fill="#D4AF37"] { fill: var(--tag); }
html.ui-t .nabl-badge-large [stroke="#D4AF37"], html.ui-t .dial-outer [stroke="#D4AF37"] { stroke: var(--pri); }
html.ui-t .nabl-badge-large [fill="#D4AF37"] { fill: var(--pri); }

/* stats */
html.ui-t .stats-bar { background: var(--stats-bg); border-bottom-color: var(--stats-line); }
html.ui-t .stat-num { color: var(--stats-ink); }
html.ui-t .stat-label { color: var(--stats-muted); }
html.ui-t .stat-divider { background: var(--stats-line); }

/* dark sections */
html.ui-t .dark-section { background: var(--dk-bg); }
html.ui-t .dark-section .section-title { color: var(--dk-ink); }
html.ui-t .dark-section .section-desc { color: var(--dk-muted) !important; }

/* services */
html.ui-t .service-card { background: var(--card); border-color: var(--line); border-radius: var(--r-card); }
html.ui-t .service-card::after, html.ui-t .product-card::before, html.ui-t .disc-card::before { background: var(--bar); }
html.ui-t .service-title { color: var(--ink); }
html.ui-t .service-desc { color: var(--muted); }
html.ui-t .service-list li { color: var(--muted); border-left-color: var(--line); }
html.ui-t .service-link { color: var(--link); }
html.ui-t .service-link:hover { color: var(--ink); }
html.ui-t .service-card.featured { background: var(--feat-bg); border-color: var(--feat-line); }
html.ui-t .service-card.featured .service-title { color: var(--feat-ink); }
html.ui-t .service-card.featured .service-desc { color: var(--feat-text); }
html.ui-t .service-card.featured .service-list li { color: var(--feat-text); border-left-color: var(--feat-line); }
html.ui-t .service-card.featured .service-link { color: var(--feat-acc); }
html.ui-t .featured-badge { background: var(--feat-badge-bg); color: var(--feat-badge-ink); border-radius: var(--r-btn); }
html.ui-t .card-media, html.ui-t .why-photo, html.ui-t .why-process-photo { background: var(--dk-solid); }
html.ui-t .why-photo { border-color: var(--line); border-radius: var(--r-card); }
html.ui-t .why-process-photo { border-color: var(--bg); border-radius: var(--r-card); }
html.ui-t .why-badge { background: var(--dk-solid); color: var(--on-dk, #fff); border-left-color: var(--pri); border-radius: var(--r-card); }
html.ui-t .why-badge svg { stroke: var(--pri); }

/* scope-search box (a dark panel inside the light Disciplines section) */
html.ui-t .scope-search { background: var(--feat-bg); border-color: var(--feat-line); border-radius: var(--r-card); color: var(--feat-ink); }
html.ui-t .scope-search h4 { color: var(--feat-ink); }
html.ui-t .scope-search p { color: var(--feat-text); }
html.ui-t .scope-search-icon { background: rgba(255,255,255,0.10); border-color: var(--feat-line); color: var(--feat-acc); border-radius: var(--r-card); }
html.ui-t .scope-search input { background: rgba(255,255,255,0.10); border-color: rgba(255,255,255,0.26); color: var(--feat-ink); border-radius: var(--r-btn); }
html.ui-t .scope-search input::placeholder { color: var(--feat-muted); }
html.ui-t .scope-search input:focus { border-color: var(--feat-acc); }
html.ui-t .scope-search-examples button { color: var(--feat-text); background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.20); }
html.ui-t .scope-search-examples button:hover { color: var(--feat-acc); border-color: var(--feat-acc); }

/* discipline tiles (white label over a photograph — unchanged), frame only */
html.ui-t .disc-card { border-radius: var(--r-card); background: var(--dk-solid); }
html.ui-t .disc-card:hover { background: var(--dk-solid); border-color: var(--pri); }
html.ui-t .disc-overlay span { color: rgba(255,255,255,0.86); }

/* accreditation */
html.ui-t .cert-item { background: var(--dk-card); border-color: var(--dk-line); border-radius: var(--r-card); }
html.ui-t .cert-icon { background: var(--dk-chip); }
html.ui-t .cert-label { color: var(--dk-muted); }
html.ui-t .cert-value { color: var(--dk-ink); }
html.ui-t .accred-photo { border-color: var(--dk-acc-line); border-radius: var(--r-card); background: var(--dk-solid); }

/* products */
html.ui-t .product-card { background: var(--dk-card); border-color: var(--dk-line); border-radius: var(--r-card); }
html.ui-t .product-card:hover { background: var(--dk-card-hi); }
html.ui-t .product-name { color: var(--dk-ink); }
html.ui-t .product-tag { color: var(--dk-acc); }
html.ui-t .product-desc { color: var(--dk-text); }
html.ui-t .product-specs { border-top-color: var(--dk-line); }
html.ui-t .spec span { color: var(--dk-muted); }
html.ui-t .spec strong { color: var(--dk-ink); }
html.ui-t .product-adv-title { color: var(--dk-acc); border-top-color: var(--dk-line); }
html.ui-t .product-adv li { color: var(--dk-text); }
html.ui-t .product-adv li b { color: var(--dk-ink); }
html.ui-t .product-adv li::before { background: var(--dk-acc); }
html.ui-t .product-leaflet { color: var(--dk-acc); }
html.ui-t .product-badge { color: var(--dk-ink); background: var(--dk-card-hi); border-color: var(--dk-line); }
html.ui-t .product-num { color: #FFFFFF; background: rgba(6,8,13,0.66); border-color: rgba(255,255,255,0.38); border-radius: var(--r-btn); }

/* about */
html.ui-t .why-feature { background: var(--card); border-color: var(--line); border-radius: var(--r-card); }
html.ui-t .why-feature:hover { border-color: var(--tag-line); box-shadow: var(--shadow); }
html.ui-t .why-icon { background: var(--chip); }
html.ui-t .why-feature h5, html.ui-t .step-content h5 { color: var(--ink); }
html.ui-t .why-feature p, html.ui-t .step-content p { color: var(--muted); }
html.ui-t .process-timeline::before { background: linear-gradient(to bottom, var(--pri-l), transparent); }
html.ui-t .step-num { background: var(--pri-l); color: var(--on-pri-l); box-shadow: 0 0 0 4px var(--bg); }

/* contact */
html.ui-t .contact-card, html.ui-t .contact-form { background: var(--dk-card); border-color: var(--dk-line); border-radius: var(--r-card); }
html.ui-t .cinfo-icon { background: var(--dk-chip); }
html.ui-t .cinfo-label { color: var(--dk-acc); }
html.ui-t .cinfo-value { color: var(--dk-text); }
html.ui-t .form-group label { color: var(--dk-muted); }
html.ui-t .form-group input, html.ui-t .form-group select, html.ui-t .form-group textarea {
  background: var(--dk-input); border-color: var(--dk-line); color: var(--dk-ink); border-radius: var(--r-btn);
}
html.ui-t .form-group input:focus, html.ui-t .form-group select:focus, html.ui-t .form-group textarea:focus { border-color: var(--dk-acc); }
html.ui-t .form-group select option { background: var(--dk-solid); color: var(--dk-ink); }
html.ui-t .form-group input::placeholder, html.ui-t .form-group textarea::placeholder { color: var(--dk-muted); }

/* footer */
html.ui-t .footer, html.ui-t .footer-photo { background: var(--foot-bg); }
html.ui-t .footer-photo::after { background: var(--foot-ov); }
html.ui-t .footer-col ul li a:hover, html.ui-t .footer-bottom-links a { color: var(--foot-acc); }
html.ui-t .social-link { border-radius: var(--r-btn); }
html.ui-t .social-link:hover { background: var(--pri); color: var(--on-pri); }

/* scope assistant (chat widget) */
html.ui-t .sc-fab { background: var(--btn-bg); color: var(--on-pri); box-shadow: 0 8px 28px rgba(var(--pri-rgb), 0.42); }
html.ui-t .sc-fab::before { border-color: rgba(var(--pri-rgb), 0.5); }
html.ui-t .sc-head { background: var(--feat-bg); color: var(--feat-ink); }
html.ui-t .sc-head-sub { color: var(--feat-text); }
html.ui-t .sc-field-name { color: var(--tag); }
html.ui-t .sc-input button { background: var(--btn-bg); color: var(--on-pri); }

/* motion: one easing everywhere, and none for people who asked for none */
html.ui-t { --tr: 0.32s cubic-bezier(.22,.61,.36,1); }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
  [data-aos] { opacity: 1; transform: none; }
}

/* ── 3c. The styles ── */

/* Midnight Cyan — near-black with electric cyan */
html[data-ui="midnight"] {
  --bg: #FFFFFF; --surface: #F3F6FA; --card: #FFFFFF; --ink: #0B1220; --text: #1F2937; --muted: #4B5563; --line: #E2E8F0;
  --tag: #0369A1; --link: #0369A1;
  --pri: #22D3EE; --pri-hi: #67E8F9; --pri-rgb: 34,211,238; --on-pri: #06202A; --sec: #818CF8;
  --dk-bg: linear-gradient(160deg, #05070D 0%, #0B1220 55%, #070B14 100%); --dk-solid: #070B14; --ov-rgb: 5,7,13; --dk-acc: #22D3EE;
  --ff-head: 'Sora', 'Inter', sans-serif; --r-card: 16px; --r-btn: 10px; --head-ls: -0.4px;
}

/* Emerald Lab — deep green with warm gold */
html[data-ui="emerald"] {
  --bg: #FFFFFF; --surface: #F1F7F4; --card: #FFFFFF; --ink: #0B2B22; --text: #1C2B27; --muted: #4A5D57; --line: #DCE7E1;
  --tag: #0F6B4F; --link: #0F6B4F;
  --pri: #E7B94B; --pri-hi: #F2D07A; --pri-rgb: 231,185,75; --on-pri: #0B2B22; --sec: #34D399;
  --dk-bg: linear-gradient(160deg, #041A14 0%, #0B3B2E 55%, #06241C 100%); --dk-solid: #06241C; --ov-rgb: 4,26,20; --dk-acc: #E7B94B;
  --r-card: 14px; --r-btn: 8px;
}

/* Carbon & Crimson — charcoal with a single strong red */
html[data-ui="crimson"] {
  --bg: #FFFFFF; --surface: #F5F5F7; --card: #FFFFFF; --ink: #16181D; --text: #23262D; --muted: #555B66; --line: #E4E5E9;
  --tag: #B4162B; --link: #B4162B;
  --pri: #E11D48; --pri-hi: #F43F5E; --pri-rgb: 225,29,72; --on-pri: #FFFFFF; --sec: #FB923C;
  --dk-bg: linear-gradient(160deg, #0E0F12 0%, #1A1C22 55%, #101114 100%); --dk-solid: #101114; --ov-rgb: 14,15,18; --dk-acc: #FB7185;
  --hero-grad: linear-gradient(120deg, #FB7185, #FDBA74);
  --r-card: 8px; --r-btn: 4px;
}

/* Royal Indigo — indigo and violet with amber */
html[data-ui="royal"] {
  --bg: #FFFFFF; --surface: #F5F5FC; --card: #FFFFFF; --ink: #1E1B4B; --text: #26264A; --muted: #56597A; --line: #E3E4F3;
  --tag: #4338CA; --link: #4338CA;
  --pri: #FBBF24; --pri-hi: #FCD34D; --pri-rgb: 251,191,36; --on-pri: #1E1B4B; --sec: #A78BFA;
  --dk-bg: linear-gradient(160deg, #0F0B2E 0%, #2A1F7A 55%, #150F3D 100%); --dk-solid: #150F3D; --ov-rgb: 15,11,46; --dk-acc: #FBBF24;
  --ff-head: 'Poppins', 'Inter', sans-serif; --r-card: 16px; --r-btn: 10px; --head-ls: -0.3px;
}

/* Graphite Minimal — black, white and nothing else */
html[data-ui="graphite"] {
  --bg: #FFFFFF; --surface: #F4F5F7; --card: #FFFFFF; --ink: #111827; --text: #1F2937; --muted: #4B5563; --line: #D9DDE3;
  --tag: #111827; --link: #111827; --tag-line: rgba(17,24,39,0.35); --chip: rgba(17,24,39,0.07);
  --pri: #F9FAFB; --pri-hi: #FFFFFF; --pri-rgb: 249,250,251; --on-pri: #111827; --sec: #9CA3AF;
  --pri-l: #111827; --on-pri-l: #FFFFFF;
  --dk-bg: linear-gradient(160deg, #0B0C0E 0%, #17191D 55%, #0D0E10 100%); --dk-solid: #0D0E10; --ov-rgb: 11,12,14; --dk-acc: #F9FAFB;
  --hero-grad: linear-gradient(120deg, #FFFFFF, #9CA3AF); --btn-shadow: none; --bar: linear-gradient(90deg, #111827, #9CA3AF);
  --ff-head: 'Space Grotesk', 'Inter', sans-serif; --r-card: 2px; --r-btn: 2px; --head-ls: -0.6px;
}
html[data-ui="graphite"] .service-link, html[data-ui="graphite"] .section:not(.dark-section) .rm-btn { text-decoration: underline; text-underline-offset: 3px; }

/* Ivory Editorial — cream paper, serif headings, bronze (light hero) */
html[data-ui="ivory"] {
  --bg: #FBF8F2; --surface: #F3EEE3; --card: #FFFFFF; --ink: #2A211B; --text: #3A302A; --muted: #655A50; --line: #E3D9CA;
  --tag: #7E5119; --link: #7E5119;
  --pri: #8A5A1F; --pri-hi: #A46E2A; --pri-rgb: 138,90,31; --on-pri: #FFFFFF; --sec: #B4772C;
  --dk-bg: linear-gradient(160deg, #1F1813 0%, #33271F 55%, #231B15 100%); --dk-solid: #231B15; --ov-rgb: 251,248,242; --dk-acc: #E3B878;
  --hero-bg: #FBF8F2;
  --hero-ov: linear-gradient(100deg, rgba(251,248,242,0.98) 0%, rgba(251,248,242,0.95) 45%, rgba(251,248,242,0.88) 100%);
  --hero-ink: #2A211B; --hero-text: #3A302A; --hero-muted: #5F5349; --hero-acc: #7E5119;
  --hero-grad: linear-gradient(120deg, #7E5119, #A8691F);
  --hero-chip2: rgba(42,33,27,0.05); --hero-line: rgba(42,33,27,0.45); --hero-line2: rgba(42,33,27,0.18);
  --canvas-op: 0; --grid-op: 0;
  --nav-bg: #FBF8F2; --nav-ink: #2A211B; --nav-text: #3A302A; --nav-muted: #5F5349; --nav-acc: #7E5119; --nav-shadow: 0 2px 18px rgba(42,33,27,0.12);
  --feat-acc: #E3B878; --feat-badge-bg: #E3B878; --feat-badge-ink: #2A211B;
  --ff-head: 'Playfair Display', Georgia, serif; --r-card: 4px; --r-btn: 2px; --head-ls: -0.2px;
}
html[data-ui="ivory"] .hero-title { font-weight: 700; }

/* Arctic Light — bright, airy and light from top to bottom (light hero) */
html[data-ui="arctic"] {
  --bg: #FFFFFF; --surface: #F1F5F9; --card: #FFFFFF; --ink: #0F172A; --text: #1E293B; --muted: #475569; --line: #E2E8F0;
  --tag: #1D4ED8; --link: #1D4ED8;
  --pri: #2563EB; --pri-hi: #3B82F6; --pri-rgb: 37,99,235; --on-pri: #FFFFFF; --sec: #0891B2;
  --dk-bg: linear-gradient(160deg, #EEF3FA 0%, #E3EBF6 100%); --dk-solid: #E9EFF8; --ov-rgb: 255,255,255;
  --dk-ink: #0F172A; --dk-text: #1E293B; --dk-muted: #475569; --dk-acc: #1D4ED8;
  --dk-card: #FFFFFF; --dk-card-hi: #FFFFFF; --dk-line: #C7D2E1; --dk-input: #FFFFFF; --dk-chip: rgba(37,99,235,0.10);
  --hero-bg: #FFFFFF;
  --hero-ov: linear-gradient(100deg, rgba(255,255,255,0.98) 0%, rgba(255,255,255,0.95) 45%, rgba(255,255,255,0.88) 100%);
  --hero-grad: linear-gradient(120deg, #1D4ED8, #0E7490);
  --hero-chip2: rgba(15,23,42,0.04); --hero-line: rgba(15,23,42,0.45); --hero-line2: rgba(15,23,42,0.16);
  --canvas-op: 0; --grid-op: 0;
  --nav-bg: #FFFFFF; --nav-shadow: 0 2px 18px rgba(15,23,42,0.10);
  --stats-bg: linear-gradient(135deg, #1E3A8A 0%, #1D4ED8 100%); --stats-ink: #FFFFFF; --stats-muted: rgba(255,255,255,0.90); --stats-line: rgba(255,255,255,0.22);
  --feat-bg: linear-gradient(160deg, #1E3A8A 0%, #1D4ED8 100%); --feat-acc: #DBEAFE; --feat-line: rgba(255,255,255,0.30);
  --feat-badge-bg: #FFFFFF; --feat-badge-ink: #1E3A8A;
  --foot-bg: #0F172A; --foot-acc: #93C5FD;
  --r-card: 16px; --r-btn: 10px;
}
html[data-ui="arctic"] .product-card, html[data-ui="arctic"] .contact-card, html[data-ui="arctic"] .contact-form,
html[data-ui="arctic"] .cert-item { box-shadow: 0 4px 22px rgba(15,23,42,0.06); }
/* a blue button on the blue scope-search panel would vanish */
html[data-ui="arctic"] .scope-search .btn-primary { background: #FFFFFF; color: #1E3A8A; box-shadow: none; }

/* Ocean Teal — deep sea green-blue with aqua */
html[data-ui="ocean"] {
  --bg: #FFFFFF; --surface: #EFF7F9; --card: #FFFFFF; --ink: #083344; --text: #17323B; --muted: #476270; --line: #D6E5EA;
  --tag: #0E6B82; --link: #0E6B82;
  --pri: #2DD4BF; --pri-hi: #5EEAD4; --pri-rgb: 45,212,191; --on-pri: #062925; --sec: #38BDF8;
  --dk-bg: linear-gradient(160deg, #03222B 0%, #0A4A57 55%, #042B35 100%); --dk-solid: #042B35; --ov-rgb: 3,34,43; --dk-acc: #5EEAD4;
  --r-card: 18px; --r-btn: 999px;
}

/* Sunset Ember — warm plum with orange */
html[data-ui="sunset"] {
  --bg: #FFFFFF; --surface: #FBF5F3; --card: #FFFFFF; --ink: #2B1420; --text: #33202A; --muted: #675460; --line: #EADFE3;
  --tag: #B93C0A; --link: #B93C0A;
  --pri: #FB923C; --pri-hi: #FDBA74; --pri-rgb: 251,146,60; --on-pri: #2B1420; --sec: #F472B6;
  --dk-bg: linear-gradient(160deg, #1A0B14 0%, #4A1D33 55%, #220E1A 100%); --dk-solid: #220E1A; --ov-rgb: 26,11,20; --dk-acc: #FDBA74;
  --r-card: 14px; --r-btn: 8px;
}

/* Industrial Steel — blue-grey and safety amber, squared off */
html[data-ui="steel"] {
  --bg: #FFFFFF; --surface: #EEF1F4; --card: #FFFFFF; --ink: #1B2733; --text: #24313D; --muted: #4F5E6C; --line: #D3DAE0;
  --tag: #9A4A06; --link: #9A4A06;
  --pri: #F59E0B; --pri-hi: #FBBF24; --pri-rgb: 245,158,11; --on-pri: #1B2733; --sec: #94A3B8;
  --dk-bg: linear-gradient(160deg, #141C24 0%, #2A3947 55%, #18222C 100%); --dk-solid: #18222C; --ov-rgb: 20,28,36; --dk-acc: #FBBF24;
  --r-card: 0px; --r-btn: 0px; --head-tt: uppercase; --head-ls: 0.6px;
}

/* Aurora Glass — violet to cyan, soft glass panels */
html[data-ui="aurora"] {
  --bg: #FFFFFF; --surface: #F6F4FC; --card: #FFFFFF; --ink: #1A1037; --text: #2A2247; --muted: #595374; --line: #E6E2F3;
  --tag: #6D28D9; --link: #6D28D9;
  --pri: #A78BFA; --pri-hi: #C4B5FD; --pri-rgb: 167,139,250; --on-pri: #0B0720; --sec: #22D3EE;
  --dk-bg: linear-gradient(160deg, #0B0720 0%, #1D1147 55%, #0D0826 100%); --dk-solid: #0D0826; --ov-rgb: 11,7,32; --dk-acc: #C4B5FD;
  --btn-bg: linear-gradient(135deg, #A78BFA 0%, #22D3EE 100%);
  --dk-card: rgba(255,255,255,0.07); --dk-line: rgba(255,255,255,0.18);
  --ff-head: 'Sora', 'Inter', sans-serif; --r-card: 22px; --r-btn: 999px; --head-ls: -0.4px;
}
html[data-ui="aurora"] .product-card, html[data-ui="aurora"] .contact-card, html[data-ui="aurora"] .contact-form,
html[data-ui="aurora"] .cert-item { backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }

/* Heritage Maroon — maroon and brass, formal */
html[data-ui="heritage"] {
  --bg: #FFFFFF; --surface: #FAF5F2; --card: #FFFFFF; --ink: #3B0D17; --text: #3A2327; --muted: #6A5257; --line: #EBDDDD;
  --tag: #8C1D33; --link: #8C1D33;
  --pri: #D9A441; --pri-hi: #E9C06D; --pri-rgb: 217,164,65; --on-pri: #3B0D17; --sec: #F0C987;
  --dk-bg: linear-gradient(160deg, #24070E 0%, #5A1424 55%, #2C0911 100%); --dk-solid: #2C0911; --ov-rgb: 36,7,14; --dk-acc: #E9C06D;
  --ff-head: 'Playfair Display', Georgia, serif; --r-card: 6px; --r-btn: 4px;
}

/* ── 3d. Gauge and NABL seal: always dark discs, so they take a light accent ── */
html.ui-t { --dial-acc: var(--dk-acc); }
html[data-ui="arctic"] { --dial-acc: #93C5FD; }
html.ui-t .dial-ring { border-color: rgba(var(--pri-rgb), 0.45); box-shadow: inset 0 0 60px rgba(0,0,0,0.6), 0 0 40px rgba(var(--pri-rgb), 0.12); background: radial-gradient(circle at 40% 35%, #1C2230 0%, #0A0D14 62%); }
html.ui-t .dial-scale span { color: var(--dial-acc); opacity: 0.85; }
html.ui-t .dial-needle { background: linear-gradient(to top, var(--dial-acc), transparent); box-shadow: 0 0 8px rgba(var(--pri-rgb), 0.6); }
html.ui-t .dial-center { background: var(--dial-acc); box-shadow: 0 0 16px rgba(var(--pri-rgb), 0.7); }
html.ui-t .dial-value, html.ui-t .nabl-cert-no { color: var(--dial-acc); }
html.ui-t .dial-label { color: rgba(255,255,255,0.72); }
html.ui-t .nabl-outer-ring { border-color: rgba(var(--pri-rgb), 0.45); background: radial-gradient(circle, #1C2230, #0A0D14); animation: none; box-shadow: 0 0 50px rgba(var(--pri-rgb), 0.18), inset 0 0 40px rgba(0,0,0,0.4); }
html.ui-t .nabl-inner { border-color: rgba(var(--pri-rgb), 0.35); }
html.ui-t .nabl-text-main { color: #FFFFFF; }
html.ui-t .nabl-text-sub { color: rgba(255,255,255,0.76); }
html.ui-t .nabl-ring-text span { color: var(--dial-acc); opacity: 0.85; }
html.ui-t .nabl-badge-large [stroke="#D4AF37"], html.ui-t .dial-outer [stroke="#D4AF37"] { stroke: var(--dial-acc); }
html.ui-t .nabl-badge-large [fill="#D4AF37"] { fill: var(--dial-acc); }

/* ── 3e. Primary button on a light section ── */
html.ui-t .btn-primary.btn-on-light { background: var(--pri-l); color: var(--on-pri-l); }
html[data-ui="aurora"] .btn-primary.btn-on-light { background: var(--btn-bg); color: var(--on-pri); }