/* ===================================================================
   BRAND TOKENS — Servion · Engage360 for Technology Advisors
   Colors sampled from Servion brand collateral; type matches its
   Poppins (display) + PT Sans (body) pairing.
   Swap this file (and the logos in /assets) for a new vendor.
=================================================================== */
:root{
  /* Core palette */
  --c-navy:       #1e2251;
  --c-navy-deep:  #161a42;
  --c-navy-soft:  #2b3068;
  --c-orange:     #f8a01f;
  --c-cyan:       #00adef;
  --c-cyan-deep:  #0077b6;  /* cyan darkened for AA text on white */
  --c-ice:        #daf3fd;
  --c-ice-strong: #b5e7fa;
  --c-purple:     #802a87;  /* hub ring accent from the illustration */
  --c-ink:        #4f4f54;
  --c-slate:      #5f6d7c;
  --c-white:      #ffffff;

  /* Type */
  --font-display: 'Poppins', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-body:    'PT Sans', 'Segoe UI', system-ui, -apple-system, sans-serif;

  /* Fluid type scale: min(vw, vh) keeps stage scenes inside short laptop viewports */
  --fs-eyebrow: clamp(12px, min(1vw, 1.7vh), 15px);
  --fs-display: clamp(44px, min(6.6vw, 11.2vh), 112px);
  --fs-h2:      clamp(30px, min(3.9vw, 6.6vh), 62px);
  --fs-h3:      clamp(17px, min(1.4vw, 2.5vh), 22px);
  --fs-lede:    clamp(18px, min(1.65vw, 2.9vh), 27px);
  --fs-body:    clamp(15px, min(1.12vw, 2.05vh), 18px);
  --fs-small:   clamp(12px, min(.86vw, 1.6vh), 14px);
  --fs-stat:    clamp(64px, min(9vw, 16vh), 168px);

  /* Layout */
  --gutter:   clamp(16px, 4.2vw, 72px);
  --maxw:     clamp(1180px, 80vw, 1520px);
  --topbar-h: 64px;
  --nav-h:    64px;
  --radius:   18px;

  /* Motion */
  --ease-out: cubic-bezier(.16, .84, .3, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
}

/* ---------- Scene themes ----------
   Each scene declares data-theme; the same names drive the chrome
   (html[data-ui]) and the background world's line colors. */
[data-theme="dark"], [data-ui="dark"]{
  --bg: var(--c-navy);
  --fg: var(--c-white);
  --fg-muted: #c9cbe0;
  --fg-soft: #9ea2c6;
  --accent: var(--c-orange);
  --accent-2: var(--c-cyan);
  --rule: rgba(218, 243, 253, .16);
  --surface: rgba(255, 255, 255, .05);
  --world-line: rgba(181, 231, 250, .17);
  --world-node: rgba(181, 231, 250, .38);
  --world-route: var(--c-orange);
}
[data-theme="light"], [data-ui="light"]{
  --bg: var(--c-white);
  --fg: var(--c-navy);
  --fg-muted: var(--c-ink);
  --fg-soft: var(--c-slate);
  --accent: var(--c-cyan-deep);
  --accent-2: var(--c-cyan-deep);
  --rule: rgba(30, 34, 81, .12);
  --surface: #f4fbfe;
  --world-line: rgba(30, 34, 81, .08);
  --world-node: rgba(0, 173, 239, .32);
  --world-route: var(--c-cyan);
  --world-route-opacity: .45;
}
[data-theme="ice"], [data-ui="ice"]{
  --bg: var(--c-ice);
  --fg: var(--c-navy);
  --fg-muted: #3d4a5c;
  --fg-soft: #4f5d6e;
  --accent: #0070ad;
  --accent-2: #0070ad;
  --rule: rgba(30, 34, 81, .16);
  --surface: rgba(255, 255, 255, .6);
  --world-line: rgba(30, 34, 81, .09);
  --world-node: rgba(0, 119, 182, .35);
  --world-route: var(--c-cyan-deep);
}
[data-theme="accent"], [data-ui="accent"]{
  --bg: var(--c-orange);
  --fg: var(--c-navy);
  --fg-muted: #2a2440;
  --fg-soft: #3a2f3c;
  --accent: var(--c-navy);
  --accent-2: var(--c-navy);
  --rule: rgba(30, 34, 81, .22);
  --surface: rgba(255, 255, 255, .9);
  --world-line: rgba(30, 34, 81, .13);
  --world-node: rgba(30, 34, 81, .3);
  --world-route: var(--c-navy);
}