/* ==========================================================================
   tokens.css — design foundation shared by both institution platforms.

   Brand hues are NOT defined here. Each platform ships a `brand.css` that
   sets --brand-*, --grad-*, --canvas. Everything below is institution-neutral
   so a single component library renders correctly in either skin, in light
   and dark, on a phone and on a desktop.
   ========================================================================== */

:root {
  color-scheme: light;

  /* ---- neutral ink scale ---------------------------------------------- */
  --ink-900: #16161f;
  --ink-700: #3a3a4a;
  --ink-600: #4a4a5a;
  --ink-500: #5a5a70;
  --ink-400: #7a7a90;
  --ink-300: #9a9aae;
  --ink-200: #b0b0c0;
  --ink-100: #c9c9d6;

  /* ---- surfaces -------------------------------------------------------- */
  --canvas: #f4f5f9;          /* app background, overridden per brand */
  --surface: #ffffff;
  --surface-2: #f5f5f9;
  --surface-3: #ececf3;
  --surface-inset: #fafafd;
  --overlay: rgba(14, 12, 26, .48);

  /* ---- text ------------------------------------------------------------ */
  --text: var(--ink-900);
  --text-soft: var(--ink-500);
  --text-faint: var(--ink-300);
  --text-invert: #ffffff;

  /* ---- lines ----------------------------------------------------------- */
  --line: #eef0f5;
  --line-strong: #e7e4ea;
  --divider: #f4f4f8;
  --divider-soft: #f6f6fa;
  --track: #f0f0f5;
  --fill: #f3f3f8;

  /* ---- semantic -------------------------------------------------------- */
  --good: #2e9e5b;   --good-bg: #eafaf0;   --good-line: #cdeedb;
  --warn: #d99a1c;   --warn-bg: #fdf6e3;   --warn-line: #f4e4b8;
  --bad:  #e0483b;   --bad-bg:  #fdeceb;   --bad-line:  #f7d3d0;
  --info: #2563c9;   --info-bg: #eaf2fd;   --info-line: #cfe0f8;

  /* ---- tint pairs: the icon-chip / category palette --------------------
     Every chip, tile, avatar and category badge draws from these ten pairs,
     which keeps a very dense screen looking like one system. */
  --t-red-bg:#fdeceb;    --t-red-fg:#e0483b;
  --t-blue-bg:#eaf1fc;   --t-blue-fg:#1e40af;
  --t-green-bg:#eefbf3;  --t-green-fg:#2e9e5b;
  --t-amber-bg:#fdf6e3;  --t-amber-fg:#d99a1c;
  --t-violet-bg:#f3edfc; --t-violet-fg:#7c3aed;
  --t-cyan-bg:#e7f6f8;   --t-cyan-fg:#0891b2;
  --t-navy-bg:#eaf1fc;   --t-navy-fg:#164593;
  --t-orange-bg:#fdf0e4; --t-orange-fg:#e2711d;
  --t-pink-bg:#fdecf3;   --t-pink-fg:#d6337a;
  --t-slate-bg:#eef0f5;  --t-slate-fg:#4a5a70;

  /* ---- elevation ------------------------------------------------------- */
  /* The canvases use one shadow idea at four depths: very soft, very far. */
  --sh-xs: 0 8px 18px -20px rgba(0, 0, 0, .4);
  --sh-sm: 0 10px 24px -22px rgba(0, 0, 0, .4);
  --sh-md: 0 14px 30px -22px rgba(20, 10, 40, .4);
  --sh-panel: 0 16px 32px -26px rgba(20, 10, 40, .4);
  --sh-lg: 0 30px 60px -34px rgba(20, 10, 40, .5);
  --sh-xl: 0 44px 84px -40px rgba(20, 10, 40, .55);
  --sh-sheet: 0 -18px 50px -22px rgba(20, 10, 40, .35);

  /* ---- radii ----------------------------------------------------------- */
  /* Radii taken directly from the design canvases: 8 chips, 9 icon squares,
     11 buttons, 12 floating rows, 14 grouped cards, 16 hero cards, 18 panels. */
  --r-xs: 8px;
  --r-sm: 9px;
  --r-btn: 11px;
  --r-md: 12px;
  --r-lg: 14px;
  --r-card: 16px;
  --r-xl: 18px;
  --r-pill: 999px;

  /* ---- type ------------------------------------------------------------ */
  --font-display: 'Sora', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-body: 'Plus Jakarta Sans', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* ---- motion ---------------------------------------------------------- */
  --ease-out: cubic-bezier(.22, .95, .36, 1);
  --ease-in-out: cubic-bezier(.5, 0, .2, 1);
  --ease-spring: cubic-bezier(.32, 1.5, .5, 1);
  --dur-fast: .13s;
  --dur: .22s;
  --dur-slow: .34s;

  /* ---- app chrome metrics --------------------------------------------- */
  --tabbar-h: 58px;
  --appbar-h: 52px;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --sidebar-w: 248px;

  /* Fallback brand values so the kit renders even before brand.css loads. */
  --brand: #2563c9;
  --brand-dark: #164593;
  --brand-deep: #0f2f63;
  --brand-soft: #eaf2fd;
  --brand-fg: #ffffff;
  --accent: #e2711d;
  --accent-dark: #c85a10;
  --accent-soft: #fdf0e4;
  --grad-brand: linear-gradient(160deg, #3f8ae4, #1f5ec2 90%);
  --grad-accent: linear-gradient(135deg, #e2711d, #c85a10);
}

/* ==========================================================================
   Dark theme. Redefines only the tokens — no component rule references a raw
   colour, so the whole system flips from here.
   ========================================================================== */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { color-scheme: dark; }
}

:root[data-theme="dark"],
:root:not([data-theme="light"]) {
  /* placeholder — real values applied by the two blocks below */
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --canvas: #0c111c;
    --surface: #141b29;
    --surface-2: #1a2333;
    --surface-3: #212c3e;
    --surface-inset: #111825;
    --overlay: rgba(2, 5, 12, .68);

    --text: #e9edf5;
    --text-soft: #a8b4c6;
    --text-faint: #6f7d92;
    --text-invert: #0c111c;

    --line: #23304a;
    --line-strong: #2d3c58;
    --divider: #1d2739;
    --divider-soft: #1a2434;
    --track: #212c3e;
    --fill: #1a2333;

    --good:#3ecf8e; --good-bg:#102c22; --good-line:#1d4636;
    --warn:#e6b13f; --warn-bg:#2c2412; --warn-line:#453718;
    --bad: #f0857c; --bad-bg: #331a17; --bad-line: #4d2723;
    --info:#6fa8f5; --info-bg: #10233d; --info-line:#1d3a60;

    --t-red-bg:#331a17;    --t-red-fg:#f0857c;
    --t-blue-bg:#12253f;   --t-blue-fg:#7fb0f0;
    --t-green-bg:#102c22;  --t-green-fg:#3ecf8e;
    --t-amber-bg:#2c2412;  --t-amber-fg:#e6b13f;
    --t-violet-bg:#231a38; --t-violet-fg:#a685f2;
    --t-cyan-bg:#0f2830;   --t-cyan-fg:#4fc3d9;
    --t-navy-bg:#12253f;   --t-navy-fg:#87b6f2;
    --t-orange-bg:#33210f; --t-orange-fg:#f0954f;
    --t-pink-bg:#331525;   --t-pink-fg:#ef7aad;
    --t-slate-bg:#1c2536;  --t-slate-fg:#9fb0c8;

    --sh-xs: 0 4px 10px rgba(0,0,0,.3);
    --sh-sm: 0 6px 16px rgba(0,0,0,.34);
    --sh-md: 0 12px 28px rgba(0,0,0,.4);
  --sh-panel: 0 14px 30px rgba(0,0,0,.42);
    --sh-panel: 0 14px 30px rgba(0,0,0,.42);
    --sh-lg: 0 26px 54px rgba(0,0,0,.5);
    --sh-xl: 0 40px 78px rgba(0,0,0,.55);
    --sh-sheet: 0 -16px 44px rgba(0,0,0,.5);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --canvas: #0c111c;
  --surface: #141b29;
  --surface-2: #1a2333;
  --surface-3: #212c3e;
  --surface-inset: #111825;
  --overlay: rgba(2, 5, 12, .68);

  --text: #e9edf5;
  --text-soft: #a8b4c6;
  --text-faint: #6f7d92;
  --text-invert: #0c111c;

  --line: #23304a;
  --line-strong: #2d3c58;
  --divider: #1d2739;
  --divider-soft: #1a2434;
  --track: #212c3e;
  --fill: #1a2333;

  --good:#3ecf8e; --good-bg:#102c22; --good-line:#1d4636;
  --warn:#e6b13f; --warn-bg:#2c2412; --warn-line:#453718;
  --bad: #f0857c; --bad-bg: #331a17; --bad-line: #4d2723;
  --info:#6fa8f5; --info-bg: #10233d; --info-line:#1d3a60;

  --t-red-bg:#331a17;    --t-red-fg:#f0857c;
  --t-blue-bg:#12253f;   --t-blue-fg:#7fb0f0;
  --t-green-bg:#102c22;  --t-green-fg:#3ecf8e;
  --t-amber-bg:#2c2412;  --t-amber-fg:#e6b13f;
  --t-violet-bg:#231a38; --t-violet-fg:#a685f2;
  --t-cyan-bg:#0f2830;   --t-cyan-fg:#4fc3d9;
  --t-navy-bg:#12253f;   --t-navy-fg:#87b6f2;
  --t-orange-bg:#33210f; --t-orange-fg:#f0954f;
  --t-pink-bg:#331525;   --t-pink-fg:#ef7aad;
  --t-slate-bg:#1c2536;  --t-slate-fg:#9fb0c8;

  --sh-xs: 0 4px 10px rgba(0,0,0,.3);
  --sh-sm: 0 6px 16px rgba(0,0,0,.34);
  --sh-md: 0 12px 28px rgba(0,0,0,.4);
  --sh-panel: 0 14px 30px rgba(0,0,0,.42);
  --sh-lg: 0 26px 54px rgba(0,0,0,.5);
  --sh-xl: 0 40px 78px rgba(0,0,0,.55);
  --sh-sheet: 0 -16px 44px rgba(0,0,0,.5);
}

/* ==========================================================================
   Reset / base
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--canvas);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overscroll-behavior-y: none;
}

h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -.02em;
  text-wrap: balance;
  margin: 0;
}

p { margin: 0; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
svg { flex-shrink: 0; }

button, input, select, textarea {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
}

button { cursor: pointer; background: none; border: none; padding: 0; }

/* Tabular numerals everywhere a figure is compared down a column. */
.tnum, .mono { font-variant-numeric: tabular-nums; }
.mono { font-family: var(--font-mono); }
.display { font-family: var(--font-display); font-weight: 700; letter-spacing: -.02em; }

::selection { background: var(--brand-soft); color: var(--brand-dark); }

:focus-visible {
  outline: 2.5px solid var(--accent);
  outline-offset: 2px;
  border-radius: 6px;
}

/* Hidden-but-scrollable regions: the app never shows a scrollbar chrome. */
.noscroll {
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.noscroll::-webkit-scrollbar { display: none; }

[hidden] { display: none !important; }

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