/* ============================================================================
   eabassets - kit/tokens.css
   The EAB palette and the primitives. Every colour in the app is one of these
   variables; no component stylesheet may carry a hard-coded colour.
   Brand (EAB Branding Guidelines 4/2024):
     287  #002F87 navy, the brand surface        293  #0055B8 links, primary
     3517 #BB0012 red, destructive and alerts    299  #00A0DF light blue accent
     446  #454649 body text                      10 C #636569 muted text
     636  #E5E1E6 light grey                     2767 #12284C deep navy (dark)
   Headings Optima (Candara / Gill Sans / Poppins fall back), body Open Sans.
   ==========================================================================*/

/* ---------------------------------------------------------------- 1. light */
:root{
  /* brand, raw */
  --brand:#002F87;         /* 287  */
  --brand-deep:#12284C;    /* 2767 */
  --brand-dark:#002248;    /* 287 shaded, the login gradient floor */
  --brand-grey:#E5E1E6;    /* 636  */

  /* surfaces */
  --bg:#F4F5F8;            /* the page */
  --panel:#ffffff;         /* cards, popovers, the grid */
  --panel2:#F7F7F7;        /* a second surface inside a card (table heads) */
  --bg2:#EDF0F6;           /* row hover, inset wells */
  --line:#D9DDE6;          /* every hairline */
  --line2:#E9E9E9;         /* the quieter hairline */

  /* type */
  --txt:#454649;           /* 446 C */
  --heading:#002F87;       /* 287 */
  --muted:#636569;         /* 10 C */
  --faint:#9095A0;

  /* brand roles */
  --accent:#0055B8;        /* 293: links, primary buttons */
  --accent-hover:#00448F;
  --accent-soft:rgba(0,85,184,.09);
  --accent-txt:#ffffff;
  --sky:#00A0DF;           /* 299 */
  --sky-soft:rgba(0,160,223,.13);
  --red:#BB0012;    --red-soft:rgba(187,0,18,.09);
  --green:#1B8A4B;  --green-soft:rgba(27,138,75,.11);
  --amber:#A76E00;  --amber-soft:rgba(167,110,0,.12);
  --teal:#0E7C8B;   --teal-soft:rgba(14,124,139,.12);
  --purple:#6B3FA0; --purple-soft:rgba(107,63,160,.12);
  --pink:#B8347E;   --pink-soft:rgba(184,52,126,.12);
  --orange:#C25E12; --orange-soft:rgba(194,94,18,.12);
  --grey:#636569;   --grey-soft:rgba(99,101,105,.12);

  /* row 1: the navy bar */
  --bar-bg:#002F87;
  --bar-txt:#ffffff;
  --bar-muted:rgba(255,255,255,.80);
  --bar-line:rgba(255,255,255,.20);
  --bar-hover:rgba(255,255,255,.14);
  --bar-grad:linear-gradient(90deg,#002F87 0%,#00327F 55%,#12284C 100%);

  /* row 2: the white submenu */
  --sub-bg:#ffffff;
  --sub-txt:#636569;
  --sub-on:#0055B8;
  --sub-line:#D9DDE6;

  /* login */
  --login-grad:linear-gradient(150deg,#002F87 0%,#00307E 45%,#12284C 100%);

  /* depth */
  --shadow:0 1px 1px rgba(18,40,76,.04),0 4px 14px rgba(18,40,76,.06);
  --shadow-md:0 2px 6px rgba(18,40,76,.08),0 12px 28px rgba(18,40,76,.10);
  --shadow-lg:0 24px 64px rgba(18,40,76,.24);
  --backdrop:rgba(18,40,76,.45);

  /* geometry */
  --radius-card:8px;
  --radius-ctl:6px;
  --pill:100px;
  --gutter:24px;
  --bar-h:56px;
  --sub-h:44px;
  --chrome-h:100px;        /* bar + submenu, for sticky offsets */
  --cell-y:9px;
  --cell-x:14px;

  /* motion */
  --t:.16s;
  --ease:cubic-bezier(.4,0,.2,1);

  /* type */
  --font:"Open Sans",-apple-system,"Segoe UI",Roboto,system-ui,sans-serif;
  --font-head:Optima,"URW Classico",Candara,"Gill Sans","Gill Sans MT",Poppins,-apple-system,"Segoe UI",sans-serif;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;

  color-scheme:light;
}

/* ----------------------------------------------------------------- 2. dark */
/* Deep navy 2767 family: surfaces are navy, not grey, so the app still reads
   as EAB in the dark. */
html[data-theme="dark"]{
  --bg:#0A182F;
  --panel:#12284C;
  --panel2:#16305A;
  --bg2:#1B3765;
  --line:#27436F;
  --line2:#1D3660;

  --txt:#E7ECF6;
  --heading:#ffffff;
  --muted:#A8B6CE;
  --faint:#7386A5;

  --accent:#4FB4EE;
  --accent-hover:#7CCAF5;
  --accent-soft:rgba(79,180,238,.16);
  --accent-txt:#08192F;
  --sky:#00A0DF;
  --sky-soft:rgba(0,160,223,.18);
  --red:#FF6B77;    --red-soft:rgba(255,107,119,.16);
  --green:#4CC98A;  --green-soft:rgba(76,201,138,.16);
  --amber:#E5B152;  --amber-soft:rgba(229,177,82,.16);
  --teal:#3FC2D4;   --teal-soft:rgba(63,194,212,.16);
  --purple:#B197E4; --purple-soft:rgba(177,151,228,.18);
  --pink:#F080C2;   --pink-soft:rgba(240,128,194,.18);
  --orange:#F0955A; --orange-soft:rgba(240,149,90,.18);
  --grey:#A8B6CE;   --grey-soft:rgba(168,182,206,.16);

  --bar-bg:#0B1E3D;
  --bar-txt:#ffffff;
  --bar-muted:rgba(255,255,255,.72);
  --bar-line:rgba(255,255,255,.14);
  --bar-hover:rgba(255,255,255,.10);
  --bar-grad:linear-gradient(90deg,#0B1E3D 0%,#12284C 100%);

  --sub-bg:#12284C;
  --sub-txt:#A8B6CE;
  --sub-on:#4FB4EE;
  --sub-line:#27436F;

  --login-grad:linear-gradient(150deg,#12284C 0%,#0A182F 70%);

  --shadow:0 1px 2px rgba(0,0,0,.35),0 8px 24px rgba(0,0,0,.35);
  --shadow-md:0 2px 6px rgba(0,0,0,.4),0 14px 34px rgba(0,0,0,.4);
  --shadow-lg:0 30px 90px rgba(0,0,0,.6);
  --backdrop:rgba(4,12,26,.66);

  color-scheme:dark;
}

/* -------------------------------------------------------------- 3. reset  */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--txt);
  font-family:var(--font);
  font-size:13px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}
h1,h2,h3,h4,h5,h6{margin:0;font-family:var(--font-head);font-weight:600;line-height:1.25;color:var(--heading);letter-spacing:.005em}
p{margin:0 0 10px}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%}
button,input,select,textarea{font:inherit;color:inherit}
button{font-family:var(--font-head)}
table{border-collapse:collapse;width:100%}

/* The UA enforces [hidden] at the lowest specificity, so any author
   display: rule beats it and overlays ship permanently painted. */
[hidden]{display:none!important}

/* ------------------------------------------------------------- 4. focus   */
:where(a,button,input,select,textarea,[tabindex]):focus-visible{
  outline:none;
  border-color:var(--accent);
  box-shadow:0 0 0 3px var(--accent-soft);
}
::selection{background:var(--accent-soft);color:var(--txt)}

/* --------------------------------------------------------- 5. scrollbars  */
*{scrollbar-width:thin;scrollbar-color:var(--line) transparent}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--line);border:3px solid transparent;background-clip:content-box;border-radius:100px}
::-webkit-scrollbar-thumb:hover{background:var(--faint);background-clip:content-box}
::-webkit-scrollbar-corner{background:transparent}

/* ------------------------------------------------------------ 6. helpers  */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.num{font-variant-numeric:tabular-nums}
.muted{color:var(--muted)}
.faint{color:var(--faint)}
.nowrap{white-space:nowrap}
.grow{flex:1}
.right{text-align:right}
.head{font-family:var(--font-head)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}