/* ---- Tokens ------------------------------------------------------------------
   Fonts are self-hosted (SIL Open Font License, see assets/fonts/). Colours
   follow the ASU brand guide (brandguide.asu.edu) but stay quiet: the screen
   is built on the ASU web greys (Gray 1 #191919 to Gray 7 #FAFAFA) and white.
   The accent (ASU Maroon #8C1D40, set at start-up from content/company.json)
   is kept to small marks: primary buttons, links, the open app, unread dots.
   ASU Gold is only for tiny highlights such as "New" tags, always with the
   dark --gold-ink text on it. Every text colour here reaches WCAG AA (4.5:1)
   on the backgrounds it is used on: muted text #5C5C5C is 5.4:1 on --panel-2,
   and the word "Available" uses #237A48 (#2E9E5B is kept for the status dot). */
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 400; font-display: swap;
  src: url(../fonts/ibm-plex-sans-400.woff2) format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-style: italic; font-weight: 400; font-display: swap;
  src: url(../fonts/ibm-plex-sans-400-italic.woff2) format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 500; font-display: swap;
  src: url(../fonts/ibm-plex-sans-500.woff2) format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 600; font-display: swap;
  src: url(../fonts/ibm-plex-sans-600.woff2) format("woff2"); }
@font-face { font-family: "Caveat"; font-style: normal; font-weight: 500; font-display: swap;
  src: url(../fonts/caveat-500.woff2) format("woff2"); }
@font-face { font-family: "Caveat"; font-style: normal; font-weight: 600; font-display: swap;
  src: url(../fonts/caveat-600.woff2) format("woff2"); }

:root {
  --font-ui: "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif;
  --font-hand: "Caveat", "Comic Sans MS", cursive;

  --bg: #FAFAFA;            /* ASU Gray 7 */
  --panel: #F0F0F0;         /* between Gray 6 and Gray 7: sidebars, hovers */
  --panel-2: #E8E8E8;       /* ASU Gray 6 */
  --line: #D0D0D0;          /* ASU Gray 5 */
  --line-strong: #BFBFBF;   /* ASU Gray 4: hovered borders */
  --field: #747474;         /* ASU Gray 3: input borders (4.7:1 on white) */
  --text: #191919;          /* ASU Gray 1 */
  --text-2: #484848;        /* ASU Gray 2: icons and secondary headings */
  --muted: #5C5C5C;
  --accent: #8C1D40;
  --accent-ink: #FFFFFF;
  --accent-soft: color-mix(in srgb, var(--accent) 8%, var(--bg));
  --accent-line: color-mix(in srgb, var(--accent) 45%, var(--bg));
  --gold: #FFC627;
  --gold-ink: #191919;
  --gold-soft: color-mix(in srgb, var(--gold) 22%, #fff);
  --online: #2E9E5B;
  --online-text: #237A48;
  --danger: #B42318;
  --danger-soft: #FCEFED;
  --danger-line: #E7B4AE;
  --night: #262626;         /* lock screen and phone screen behind the wallpaper */

  --radius: 8px;
  --radius-lg: 12px;
  --shadow-1: 0 1px 2px rgba(25, 25, 25, .08), 0 2px 8px rgba(25, 25, 25, .06);
  --shadow-2: 0 4px 12px rgba(25, 25, 25, .10), 0 16px 40px rgba(25, 25, 25, .14);

  --ease-cam: cubic-bezier(.2, .7, .2, 1);
  --t-cam: 700ms;
  --t-light: 1500ms;
  --t-hover: 150ms;
  --t-os: 160ms;
  --t-ui: 180ms;
}

@media (prefers-reduced-motion: reduce) {
  :root { --t-hover: 0ms; --t-ui: 0ms; --t-light: 0ms; }
}