/* ===========================================================================
   Equinix 2026 visual language -- EVERY colour in the demo lives in this file.
   ===========================================================================

   Source: the official Equinix 2026 PowerPoint template
   (Equinix_PPT_Template_16x9_Purple-Blue_2026.potx) -- its theme1.xml palette and
   fonts, and the title slide's gradient and chevron shelf. These replace the
   earlier values, which were derived by eye from portal screenshots.

   app.css consumes these tokens and contains no colour of its own, so this file
   is the one place to change for a rebrand. tests/test_demo_app.py checks that,
   and computes the contrast of every text colour on every surface it is used on.

   RED IS THE LOGO'S. The template uses #E91C24 for the fortress mark and for
   nothing else, and neither does this board: app.css never reads --eq-red.

   TEXT vs FILL. The template's blue, yellow and orange are fills. As text on
   white, #FDB90D and #F55200 fail 4.5:1 outright, so each destination has a
   darker TEXT colour (--eq-facility, --eq-cloud, --eq-blocked) and keeps the
   brand colour for bars, edges and dots (--eq-*-fill).
   ------------------------------------------------------------------------- */

:root {
  /* --- the template palette (theme1.xml) -------------------------------- */
  --eq-red: #E91C24;
  --eq-deep: #411980;
  --eq-purple: #7739D9;
  --eq-blue: #086AE3;
  --eq-yellow: #FDB90D;
  --eq-orange: #F55200;
  --eq-slate: #5A657B;
  --eq-mist: #F2F3F5;

  /* --- the title slide's gradient and chevron shelf --------------------- */
  --eq-grad-1: #470063;
  --eq-grad-2: #3D1077;
  --eq-grad-3: #2140B0;
  --eq-grad-4: #086AE3;
  --eq-grad: linear-gradient(60deg, var(--eq-grad-1) 0%, var(--eq-grad-2) 34%, var(--eq-grad-3) 75%, var(--eq-grad-4) 100%);
  /* The lighter purple glow in a downward V along the band's lower edge.
     Recreated rather than shipping the template's 480 KB PNG. */
  --eq-chevron: radial-gradient(50% 140% at 28% 100%, rgba(150, 90, 255, 0.6), rgba(119, 57, 217, 0) 70%);

  /* --- neutrals ---------------------------------------------------------- */
  --eq-white: #FFFFFF;
  --eq-ink: #0B1020;
  --eq-ink-2: #333B4F;
  --eq-line: #E3E6EE;
  --eq-line-strong: #D5D9E3;
  --eq-surface-2: #F7F8FA;
  --eq-purple-tint: #F3EEFD;
  --eq-purple-tint-2: #E6DCFA;

  /* --- on the gradient band: white text only ----------------------------- */
  --eq-on-band: #FFFFFF;
  /* Subtitles only, which sit on the band's darker left half. */
  --eq-on-band-muted: rgba(255, 255, 255, 0.94);
  --eq-band-line: rgba(255, 255, 255, 0.35);
  /* Darkening, not lightening: a white wash over the band's blue end would drop
     white text below 4.5:1 exactly where the health pill and Unlock sit. */
  --eq-band-fill: rgba(11, 16, 32, 0.22);
  --eq-band-fill-hover: rgba(11, 16, 32, 0.34);
  --eq-ok-on-band: #3DDC97;
  --eq-ok-halo: rgba(61, 220, 151, 0.7);

  /* --- where a request went ---------------------------------------------- */
  --eq-facility: #0A5BC4;
  --eq-facility-fill: #086AE3;
  --eq-facility-tint: #E6F0FD;
  --eq-cloud: #8A5B00;
  --eq-cloud-fill: #FDB90D;
  --eq-cloud-tint: #FFF4D6;
  --eq-blocked: #B83800;
  --eq-blocked-fill: #F55200;
  --eq-blocked-tint: #FDEEE6;
  --eq-ok: #0B7A55;
  --eq-ok-tint: #E3F5EE;
  /* "This did not do what it promised." Deliberately not the logo red. */
  --eq-alarm: #9B1C1C;
  --eq-alarm-tint: #FDECEC;

  /* --- scenario categories: [accent, light header, dark text] ------------
     Four hues far apart on the wheel, so a category reads at a glance. Each
     dark text colour passes 4.5:1 on its own header and on white. */
  --eq-cat-routing: #0F6E7A;
  --eq-cat-routing-bg: #D5F0F2;
  --eq-cat-routing-ink: #0B545C;
  --eq-cat-regulated: #7739D9;
  --eq-cat-regulated-bg: #E9E0FA;
  --eq-cat-regulated-ink: #411980;
  --eq-cat-failover: #B0126B;
  --eq-cat-failover-bg: #FBDDEB;
  --eq-cat-failover-ink: #8E0F56;
  --eq-cat-sharing: #5A657B;
  --eq-cat-sharing-bg: #E2E8F0;
  --eq-cat-sharing-ink: #334155;
  --eq-cat-guardrails: #0B6B3A;
  --eq-cat-guardrails-bg: #DDF3E4;
  --eq-cat-guardrails-ink: #0A4D2A;

  /* --- the route map's hub: the Distributed AI Hub stack ------------------ */
  --eq-hub-frame-1: #3D1077;
  --eq-hub-frame-2: #7739D9;
  --eq-hub-bar: #0B1020;
  --eq-hub-lit: #7739D9;
  --eq-hub-lit-glow: rgba(150, 90, 255, 0.55);
  /* the guardrail bar lights green, the guardrails category's hue, so it reads
     apart from the purple gateway bar above it */
  --eq-hub-guard-lit: #0E8048;
  --eq-hub-guard-lit-glow: rgba(61, 220, 151, 0.6);

  /* --- utility ----------------------------------------------------------- */
  --eq-focus: #7739D9;
  --eq-scrim: rgba(11, 16, 32, 0.55);
  --eq-shadow: 0 1px 2px rgba(20, 20, 50, 0.06), 0 12px 32px -18px rgba(40, 20, 110, 0.35);
  /* Arial is the template's major and minor font. Nothing is downloaded. */
  --eq-font: Arial, "Helvetica Neue", Helvetica, sans-serif;
  --eq-mono: Menlo, Consolas, "Liberation Mono", monospace;
  --eq-radius: 14px;
  --eq-radius-sm: 10px;
}