/* Global Icons colour tokens — company blue scale.
   600 #0053E2, 800 #002D7A and 900 #001A4D are the company colours; the other steps are derived from them.
   The design-system stylesheet reads these names (navy, royal, ice, light-blue, rule, focus). */
:root{
  --blue-50:#ECF2FD; --blue-100:#D9E6FC; --blue-200:#ADCBFF; --blue-300:#75A8FF; --blue-400:#337EFF;
  --blue-500:#005EFF; --blue-600:#0053E2; --blue-700:#0043B8; --blue-800:#002D7A; --blue-900:#001A4D; --blue-950:#001538;
  --gold:#FFC220; --gold-on-blue:#FFDC94;
  /* design-system roles */
  --navy:var(--blue-900);          /* headings, main text, structural rules */
  --royal:var(--blue-600);         /* primary buttons, links, labels */
  --royal-press:var(--blue-700);   /* hover */
  --royal-active:var(--blue-800);  /* pressed */
  --ice:var(--blue-50);            /* pale bands */
  --light-blue:var(--blue-100);    /* text and lines on blue, fills */
  --rule:var(--blue-100);          /* hairlines on white */
  --focus:var(--blue-600);
}
/* button states: primary 600 → 700 → 800; outline buttons fill 50 → 100 */
.gi .gi-btn--primary:active{background:var(--blue-800);border-color:var(--blue-800)}
.gi .gi-btn--secondary:hover{background:var(--blue-50)}
.gi .gi-btn--secondary:active{background:var(--blue-100)}
.gi-dark .gi-btn--primary:active{background:var(--blue-100);border-color:var(--blue-100)}