/* ===========================================================
   Redlogger — shared design tokens
   One source of truth for the marketing site (index.html) and
   the portal (portal/*.html), so the two never drift apart
   visually again. Palette validated for categorical CVD-safety:
   primary/secondary pair passes the dataviz palette validator
   (ΔE 16.9 protan / 17.5 normal-vision, both well above floor).
   =========================================================== */
:root{
  /* ---- Brand — deepened + extended for Pass 11's design-system rebuild.
     Hue kept close to the validated original (a small, deliberate shift
     toward a crisper, more saturated blue) so the brand doesn't drift
     after 10 passes of screenshots — richness comes from the extended
     step range and refined neutrals/shadows below, not a new hue. ---- */
  --primary-900:   #0d2f5c;
  --primary-800:   #123a70;
  --primary-700:   #17509a;
  --primary-600:   #2166bd;
  --primary:       #2b6fe0;
  --primary-500:   #2b6fe0;
  --primary-400:   #5990e8;
  --primary-100:   #cde2fb;
  --primary-50:    #eaf2fc;
  --primary-25:    #f4f8fe;

  /* Secondary — water / cool accent. Kept distinct enough from
     primary to serve as a true second categorical color (electricity
     vs. water) rather than a decorative tint. */
  --secondary-800:  #0a4b42;
  --secondary-700:  #0f6459;
  --secondary-600:  #178879;
  --secondary:      #1f9e8f;
  --secondary-500:  #1f9e8f;
  --secondary-400:  #4bb3a5;
  --secondary-100:  #c9ede6;
  --secondary-50:   #e7f7f4;

  /* ---- Neutrals — extended warm-gray scale (9 steps + surfaces).
     Old token names kept as aliases so nothing downstream breaks;
     the numbered scale is available for any new component. ---- */
  --gray-950:       #0b0b0b;
  --gray-900:       #17160f;
  --gray-800:       #2c2a22;
  --gray-700:       #4a4945;
  --gray-600:       #625f57;
  --gray-500:       #83807a;
  --gray-400:       #a8a59c;
  --gray-300:       #d3d0c4;
  --gray-200:       #e5e3db;
  --gray-100:       #f3f2ed;
  --gray-50:        #f9f9f6;

  --ink:            var(--gray-950);
  --ink-soft:       var(--gray-700);
  --muted:          var(--gray-500);
  --faint:          var(--gray-400);

  --surface:        #ffffff;
  --surface-alt:    var(--gray-50);
  --surface-sunk:   var(--gray-100);
  --border:         var(--gray-200);
  --border-strong:  var(--gray-300);

  /* ---- Status ---- */
  --good:           #0c9c4f;
  --good-bg:        #e8f7ee;
  --warning:        #d98a12;
  --warning-bg:     #fdf3e0;
  --critical:       #cc3b3b;
  --critical-bg:    #fbeaea;

  /* ---- Shape — a real scale (4 steps + pill), used consistently:
     sm for inputs/small controls, md for buttons/tags, lg for cards,
     xl for hero-scale surfaces. ---- */
  --radius-sm: 8px;
  --radius: 12px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-pill: 999px;

  /* ---- Elevation — a soft, layered shadow system (two shadows per
     step: a tight contact shadow + a diffuse ambient one) instead of
     one flat blur, so depth reads as physical rather than a gray
     smudge. Tinted 1-2% toward primary at the higher steps for warmth. ---- */
  --shadow-xs: 0 1px 2px rgba(11,11,11,.05);
  --shadow-sm: 0 1px 3px rgba(11,11,11,.07), 0 1px 2px rgba(11,11,11,.05);
  --shadow-md: 0 10px 28px rgba(11,11,11,.09), 0 2px 8px rgba(11,11,11,.05);
  --shadow-lg: 0 28px 72px rgba(11,11,11,.14), 0 6px 16px rgba(11,11,11,.06);
  --shadow-xl: 0 40px 100px rgba(13,15,20,.18), 0 12px 28px rgba(13,15,20,.08);
  --shadow-glow: 0 0 0 1px rgba(43,111,224,.10), 0 16px 40px rgba(43,111,224,.18);

  /* ---- Type scale (display headings only — body copy stays on
     Inter's own rhythm). Mirrors the 48–72/36–48/28–32/22–24 ramp. ---- */
  --fs-display: clamp(40px, 4.8vw, 64px);
  --fs-h1: clamp(34px, 4vw, 48px);
  --fs-h2: clamp(28px, 3.2vw, 38px);
  --fs-h3: clamp(20px, 2vw, 24px);

  /* ---- Motion ---- */
  --ease-out: cubic-bezier(.16,.84,.32,1);
  --ease-spring: cubic-bezier(.34,1.35,.64,1);
}

/* ---------------------------------------------------------------
   Shared micro-utilities used by both the marketing site and the
   portal: animated number counters, chart hover tooltip, and a
   top-of-page scroll progress bar. Each is opt-in via a class/id
   so it costs nothing on pages that don't use it.
   --------------------------------------------------------------- */

.scroll-progress{
  position:fixed; top:0; left:0; height:3px; width:0%;
  background:linear-gradient(90deg, var(--primary), var(--secondary));
  z-index:200; transition:width .1s linear;
}

/* Lightweight floating tooltip for chart hover states (bar/line). */
.chart-tooltip{
  position:absolute; pointer-events:none; z-index:30;
  background:var(--ink); color:#fff;
  font-family:'IBM Plex Mono', monospace; font-size:11.5px; line-height:1.4;
  padding:7px 10px; border-radius:8px; box-shadow:var(--shadow-md);
  transform:translate(-50%,-115%); opacity:0; transition:opacity .12s ease;
  white-space:nowrap;
}
.chart-tooltip.show{ opacity:1; }
.chart-tooltip .tt-title{ color:#c9c6bc; font-size:10px; margin-bottom:4px; font-weight:600; letter-spacing:.02em; }
.chart-tooltip .tt-rows{ display:flex; flex-direction:column; gap:2px; }
.chart-tooltip .tt-row{ display:flex; align-items:baseline; gap:12px; justify-content:space-between; }
.chart-tooltip .tt-row-label{ color:#c9c6bc; font-size:10.5px; }
.chart-tooltip .tt-row-value{ font-weight:600; }
.chart-hover-surface{ position:relative; }
.chart-crosshair{ stroke:var(--border-strong); stroke-width:1; pointer-events:none; opacity:0; transition:opacity .1s; }
.chart-crosshair.show{ opacity:1; }

@media (prefers-reduced-motion: reduce){
  .scroll-progress{ transition:none; }
}