/* Transfer Answers design tokens: shared by the website and the app, so the two read as one product.
   This file is the canonical copy: transfer-answers-site/assets/tokens.css.
   The app (TransferDesk) carries a byte-identical copy at tokens.css, made by TransferDesk/tools/sync-tokens.sh.
   Edit it here, then run the sync. Custom properties only: layout, components and font loading live in each project.

   The palette is navy, one accent blue, one surface tone, hairlines and text. The accent marks focus, links and the
   single highlighted thing in a view. Every other blue in either product is a mix of the accent with white or navy,
   named below, so there is no stray shade. No glow except --dot-glow, on the dot that ends the logo's curve and on
   the picked campus dot on the Overview map. No gradients, glass or perspective. */
:root{
  /* ---------- color ---------- */
  --navy-950:#0A1128; --navy-900:#111C3D; --navy-800:#1B2A55;
  --accent:#2563EB;                                  /* 5.2:1 on paper, 4.8:1 on the surface */
  --accent-hover:#1D4ED8;                            /* pressed and hovered: one step darker, never lighter */
  --accent-ink:#1D4ED8;                              /* accent text on a pale accent fill (chips, selected rows) */
  --accent-on-dark:#60A5FA;                          /* the accent on navy: 6.9:1 on navy-900 */
  --accent-soft:color-mix(in srgb,#2563EB 14%,#FFFFFF);   /* pale accent: tracks, chips, selected washes */
  --paper:#FFFFFF;
  --surface:#F4F7FB;                                 /* the one surface tone */
  --ink:#0F172A; --ink-2:#334155; --ink-3:#475569;   /* 17:1, 10:1 and 7.5:1 on paper; nothing fainter carries text */
  --line:#E2E8F0; --line-strong:#CBD5E1; --track:var(--accent-soft);
  --on-dark:#F8FAFC; --on-dark-2:rgba(248,250,252,.76);   /* 8.9:1 on navy-900 */
  --line-dark:rgba(248,250,252,.14);
  --base-dark:rgba(248,250,252,.2); --base-light:rgba(15,23,42,.16);   /* the logo's flat line, on navy and on paper */
  /* the logo's own two blues, used only where the mark is drawn inline */
  --logo-curve:#1288F0; --logo-line:#9CCBF6;
  /* data steps: the accent mixed toward white (lighter) or navy (darker), for bars and series only */
  --ramp-1:color-mix(in srgb,#2563EB 62%,#111C3D); --ramp-2:#2563EB;
  --ramp-3:color-mix(in srgb,#2563EB 78%,#FFFFFF); --ramp-4:color-mix(in srgb,#2563EB 58%,#FFFFFF);
  --ramp-5:color-mix(in srgb,#2563EB 36%,#FFFFFF); --ramp-6:color-mix(in srgb,#2563EB 20%,#FFFFFF);

  /* older names, kept so nothing breaks; each resolves to the palette above */
  --blue-600:var(--accent); --blue-500:var(--accent-hover); --blue-700:var(--accent-ink);
  --blue-400:var(--accent-on-dark); --blue-100:var(--accent-soft); --tint:var(--surface);
  /* retired effects: they resolve to nothing, so any leftover use draws flat */
  --navy-light:none; --dots:none; --grain:none; --sheen:none;
  --glow-blue:0 0 #0000; --hi:0 0 #0000; --hi-dark:0 0 #0000; --focus-glow:0 0 #0000;

  /* the one glow in the product */
  --dot-glow:drop-shadow(0 0 3px rgba(96,165,250,.9)) drop-shadow(0 0 9px rgba(96,165,250,.45));

  /* ---------- type: Source Serif 4 for headings, Public Sans for everything else (both from Google Fonts) ---------- */
  --serif:'Source Serif 4','Source Serif Pro',Charter,'Iowan Old Style',Georgia,'Times New Roman',serif;
  --sans:'Public Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --head-font:var(--serif); --head-weight:600;
  --display:100%;                                    /* no stretched display width any more */
  --fs-eyebrow:12px; --fs-small:14px; --fs-body:17px; --fs-body-lg:18px; --fs-lead:20px; --fs-h3:21px; --fs-h2:38px; --fs-h1:56px;
  --lh-body:1.6; --lh-display:1.1; --track-display:-.01em;
  --measure:64ch;

  /* ---------- shape and depth: flat surfaces with hairlines; a small shadow only where something floats ---------- */
  --r-panel:16px; --r-card:12px; --r-btn:10px; --r-chip:999px; --r-xs:6px;
  --shadow-sm:0 1px 2px rgba(15,23,42,.06);
  --shadow-md:0 1px 2px rgba(15,23,42,.05),0 4px 12px -4px rgba(15,23,42,.10);
  --shadow-lg:0 2px 4px rgba(15,23,42,.06),0 12px 28px -10px rgba(15,23,42,.18);
  --raised:var(--shadow-sm); --raised-hover:var(--shadow-md);

  /* ---------- focus: one ring everywhere ---------- */
  --focus-ring:2px solid var(--accent); --focus-offset:2px;

  /* ---------- motion: short, eased, once ---------- */
  --ease:cubic-bezier(.22,1,.36,1); --t-hover:150ms; --t-reveal:360ms; --t-max:600ms;
  --spring:var(--ease); --t-spring:280ms; --spring-soft:var(--ease); --t-spring-soft:420ms;
}
@media (max-width:767px){ :root{ --fs-h1:38px; --fs-h2:28px; --fs-h3:19px; --fs-lead:18px } }