:root{
  /* Primary — Blue */
  --blue-deep:#00205B;
  --blue-light:#08B2FF;
  --blue-01:#00205B;
  --blue-02:#003DA5;
  --blue-03:#0070D4;
  --blue-04:#5FCDF5;
  --blue-05:#D4EDFC;

  /* Secondary — five color themes, 4 tones each (01 darkest -> 04 lightest) */
  --green-01:#004000;
  --green-02:#00A944;
  --green-03:#3FD185;
  --green-04:#BDE9C9;

  --teal-01:#0B3F47;
  --teal-02:#008198;
  --teal-03:#36C2CC;
  --teal-04:#9CDBD9;

  --indigo-01:#06038D;
  --indigo-02:#0047BB;
  --indigo-03:#5C88DA;
  --indigo-04:#B8CCEA;

  --purple-01:#441170;
  --purple-02:#753BBD;
  --purple-03:#A67BCA;
  --purple-04:#DFC8E7;

  --fuchsia-01:#65004D;
  --fuchsia-02:#D912AE;
  --fuchsia-03:#DFA0C9;
  --fuchsia-04:#EAD3E2;

  --safety-yellow:#FCE300;

  /* Grays 01 (darkest) -> 05 (lightest) */
  --gray-01:#25262A;
  --gray-02:#333F48;
  --gray-03:#666F75;
  --gray-04:#A2AAAD;
  --gray-05:#D0D3D4;

  --white:#FFFFFF;

  /* Semantic aliases */
  --surface-page:var(--white);
  --surface-card:var(--white);
  --surface-sunken:var(--gray-05);
  --surface-deep:var(--blue-01);

  --text-primary:var(--gray-01);
  --text-secondary:var(--gray-03);
  --text-on-deep:var(--white);
  --text-link:var(--blue-03);
  --text-link-hover:var(--blue-02);

  --border-default:var(--gray-05);
  --border-strong:var(--gray-04);

  --accent-primary:var(--blue-03);
  --accent-primary-hover:var(--blue-02);
  --accent-light:var(--blue-light);

  --focus-ring:var(--blue-04);

  --status-success:var(--green-02);
  --status-caution:var(--safety-yellow);
  --status-info:var(--teal-02);
}