/* ============================================================
   WAO Landing — Redesign 2026 reskin for inner pages
   (WaterOS, Company profile)

   Loaded AFTER style.css. It does NOT touch the bespoke layouts;
   it only:
     1. remaps the legacy design tokens to the Design-System palette
        + Be Vietnam Pro, so every existing class (.section, .card,
        .btn, .wos-*, .prof-*) adopts the new colors/typography, and
     2. darkens the shared .hero to match the new dark hero look.
   The dark nav/footer chrome comes from redesign.css (also loaded).
   ============================================================ */

/* ---- 1. Token remap (overrides style.css :root) ---- */
:root {
  --blue:        #1e4ff0;   /* brand / blue-600 */
  --blue-bright: #4f7bff;   /* blue-400 */
  --blue-deep:   #15349b;   /* blue-800 */
  --navy:        #0a0e1a;   /* navy-900 — headings + dark bands */
  --ink:         #0f172a;   /* slate-900 — strong text */
  --muted:       #64748b;   /* slate-500 */
  --muted-2:     #94a3b8;   /* slate-400 */
  --bg:          #ffffff;
  --bg-soft:     #f6f8fb;   /* slate-50 */
  --bg-soft-2:   #eef2f7;   /* slate-100 */
  --line:        #e2e8f0;   /* slate-200 */
  --line-strong: #cbd5e1;   /* slate-300 */

  --shadow-sm: 0 1px 3px rgba(10,14,26,.08), 0 1px 2px rgba(10,14,26,.04);
  --shadow-md: 0 6px 16px rgba(10,14,26,.08), 0 2px 4px rgba(10,14,26,.05);
  --shadow-lg: 0 16px 40px rgba(10,14,26,.12), 0 4px 10px rgba(10,14,26,.06);

  --grad-navy: linear-gradient(135deg, #0a0e1a 0%, #131a2e 55%, #15349b 100%);
  --grad-blue: linear-gradient(135deg, #4f7bff 0%, #1e4ff0 100%);
  --grad-soft: linear-gradient(180deg, #f6f8fb 0%, #eef2f7 100%);

  --font: 'Be Vietnam Pro', -apple-system, 'Segoe UI', Roboto, system-ui, sans-serif;
}

/* The value glyphs / chapter numerals use a serif by default; the DS
   prefers the brand sans for those big display letters. */
.value-letter,
.prof-chapter .pc-no { font-family: var(--font) !important; font-weight: 800; }

/* Section-title icon badge — sync with the homepage rd-head__ic */
.sec-head .rd-head__ic { margin-bottom: 16px; }
.sec-head.center .rd-head__ic { margin-left: auto; margin-right: auto; }
.split-text .rd-head__ic,
.wos-feature-text .rd-head__ic { margin-bottom: 16px; }

/* Buttons → match the new .wao-btn primary (solid fill + brand glow) */
.btn-primary { background: var(--blue); box-shadow: 0 8px 28px rgba(30,79,240,.35); }
.btn-primary:hover { background: var(--blue-deep); box-shadow: 0 12px 32px rgba(30,79,240,.42); }

/* Collapse doubled vertical padding between adjacent sections (all inner-page
   section tones are light, so always keep a single rhythm). */
.section + .section { padding-top: 0; }

/* ---- 2. Dark hero (matches .rd-hero) ---- */
.hero {
  background:
    radial-gradient(1100px 520px at 12% -12%, rgba(30,79,240,.40), transparent 58%),
    radial-gradient(900px 460px at 96% 4%, rgba(18,181,165,.18), transparent 56%),
    var(--navy-900);
  color: var(--text-on-inverse);
}
.hero h1 { color: #fff; }
.hero .hero-sub { color: var(--text-on-inverse-muted); }

/* faint light grid instead of the light-theme blue grid */
.hero-grid-bg {
  background-image:
    linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
}

/* chips / badges on the dark hero */
.hero .chip {
  background: rgba(255,255,255,.07);
  border-color: rgba(255,255,255,.14);
  color: #cdd6ef;
}
.hero .chip .dot { background: var(--teal-300); }

.hero-tags { color: var(--blue-300); }
.hero-tags span::after { color: var(--teal-300); }

/* WaterOS KPI row */
.wos-kpis strong { color: #fff; }
.wos-kpis span { color: var(--text-on-inverse-muted); }

/* Profile domain chips */
.prof-domains span {
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.14);
  color: #cdd6ef;
  box-shadow: none;
}

/* ghost button reads on dark */
.hero .btn-ghost {
  background: rgba(255,255,255,.10);
  color: #fff;
  border-color: rgba(255,255,255,.22);
}
.hero .btn-ghost:hover {
  background: rgba(255,255,255,.18);
  border-color: rgba(255,255,255,.30);
  color: #fff;
}

/* blobs glow rather than multiply on the dark surface */
.hero .blob { mix-blend-mode: screen; opacity: .4; }
.hero .scroll-cue { border-color: rgba(255,255,255,.3); }
.hero .scroll-cue span { background: var(--teal-300); }