/* SUPERKUL Reimburse — tokens & base
   Palette: SUPERKUL brand teal (#007186) with the ice-cube blues of the logo.
   Money always uses tabular numerals.
   Status meaning is never carried by color alone (badges always have text). */

:root {
  --ink: #15232c;
  --ink-2: #44555f;
  --ink-3: #6b7b84;
  --bg: #eef6f7;
  --panel: #ffffff;
  --panel-2: #f5fafb;
  --line: #d2e3e6;
  --line-strong: #b1cbd0;

  /* Brand (from the SUPERKUL logo) */
  --teal: #007186;      /* wordmark — 5.7:1 on white */
  --teal-600: #005b6c;  /* hover / pressed */
  --teal-50: #e2f4f6;
  --frost: #85d0d3;     /* cube face */
  --ice: #ade8e8;       /* cube highlight */
  --steel: #58a7b8;     /* cube shade — decorative only (2.7:1) */

  --ok: #1d6e46;      --ok-bg: #e2f2e9;
  --warn: #8a5300;    --warn-bg: #fcf0d9;
  --danger: #a42118;  --danger-bg: #fbe6e3;
  --info: #2d4f98;    --info-bg: #e5ecfa;
  --muted-bg: #e8edef;

  --radius-s: 6px;
  --radius-m: 10px;
  --radius-l: 16px;
  --shadow-drawer: -18px 0 40px rgba(21, 35, 44, .18);
  --focus: 0 0 0 3px rgba(0, 113, 134, .35);

  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --font-num: ui-monospace, "SF Mono", "Cascadia Mono", "Roboto Mono", Menlo, monospace;

  --fs-xs: .75rem;
  --fs-s: .8125rem;
  --fs-m: .9375rem;
  --fs-l: 1.125rem;
  --fs-xl: 1.5rem;
  --fs-xxl: 2rem;

  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px;
  --sidenav-w: 236px;
  --topbar-h: 60px;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--fs-m);
  line-height: 1.5;
  color: var(--ink);
  background: var(--bg);
  font-feature-settings: "tnum" 1;
}

h1, h2, h3, h4 { margin: 0 0 var(--sp-3); line-height: 1.2; font-weight: 650; letter-spacing: -.01em; }
h1 { font-size: var(--fs-xl); }
h2 { font-size: var(--fs-l); }
h3 { font-size: var(--fs-m); }
p { margin: 0 0 var(--sp-3); }
a { color: var(--teal); }
a:hover { color: var(--teal-600); }
img, svg { max-width: 100%; }
small { font-size: var(--fs-s); }

:focus-visible { outline: none; box-shadow: var(--focus); border-radius: var(--radius-s); }

.num, .money { font-variant-numeric: tabular-nums; white-space: nowrap; }
.mono { font-family: var(--font-num); font-size: .92em; }
.muted { color: var(--ink-3); }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.skip-link { position: absolute; left: -999px; top: 8px; background: var(--panel); padding: 8px 12px; z-index: 100; }
.skip-link:focus { left: 8px; }

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