:root{
  /* --- Ground: blue-black, pulled from the sky in the hero photograph --- */
  --ground:#0E1319;
  --raised:#151B23;
  --raised-2:#1D242E;

  /* --- Paper: text values on the ground --- */
  --paper:#F2F4F6;
  --paper-cool:#DCE3EA;
  --muted:#9AA6B2;
  --muted-2:#7E8B99;

  /* --- Brand accents, from the logo --- */
  --volt:#4FC3F7;
  --volt-deep:#3FA9DE;
  --indigo:#2E2C8F;

  /* --- Logo literals, sampled from the mark. Field use only. --- */
  --logo-sky:#6CCFF6;
  --logo-blue:#47B8F1;
  --logo-azure:#0690CF;
  --logo-indigo:#2D3092;

  /* --- Hairlines --- */
  --line:rgba(242,244,246,.10);
  --line-strong:rgba(242,244,246,.18);
  --line-volt:rgba(79,195,247,.32);

  /* --- Semantic aliases --- */
  --surface-page:var(--ground);
  --surface-panel:var(--raised);
  --surface-panel-hover:var(--raised-2);
  --surface-inset:#0A0E13;

  --text-display:var(--paper);
  --text-body:var(--paper-cool);
  --text-muted:var(--muted);
  --text-meta:var(--muted-2);
  --text-accent:var(--volt);
  --text-on-volt:#08243A;

  --accent:var(--volt);
  --accent-hover:var(--volt-deep);
  --accent-rule:var(--volt);
  --field:var(--indigo);

  --border-subtle:var(--line);
  --border-default:var(--line-strong);
  --focus-ring:var(--volt);

  /* --- Status. Kept cool-adjacent so they sit inside the palette. --- */
  --ok:#5FC98B;
  --warn:#E7B75F;
  --danger:#E9705F;
  --info:var(--volt);

  /* --- Protection gradient: laid over photography under any text --- */
  --scrim-bottom:linear-gradient(to top,rgba(14,19,25,.92) 0%,rgba(14,19,25,.72) 38%,rgba(14,19,25,0) 100%); /* @kind other */
  --scrim-full:linear-gradient(to top,rgba(14,19,25,.88) 0%,rgba(14,19,25,.34) 55%,rgba(14,19,25,.18) 100%); /* @kind other */
}