/**
 * UZH global CSS supplement for the uzhswap Uniswap Interface.
 *
 * This file covers the small set of things in the app that ARE plain,
 * stable CSS (not styled-components-generated class names), so they're
 * safe to override with a static stylesheet:
 *   - the <html>/<body> background shown before the JS bundle mounts
 *   - text selection colour
 *   - scrollbar colour (webkit + firefox)
 *   - focus outline colour
 *   - the browser UI/theme-color (address bar tint on mobile)
 *
 * It will NOT recolour buttons, cards, charts, etc. — that requires editing
 * the app's theme source (see uzh-theme-colors.ts) and rebuilding. Use this
 * file as a companion, not a substitute.
 *
 * HOW TO WIRE IT IN
 * ------------------
 * Add one line to the app's public/index.html, inside <head>, then rebuild:
 *
 *   <link rel="stylesheet" href="%PUBLIC_URL%/uzh-global-overrides.css" />
 *
 * and drop this file into the app's `public/` directory (classic CRA-based
 * Interface forks) so it gets copied into the build output unmodified.
 *
 * If you only want a quick, no-rebuild patch, you can instead paste this
 * file's contents directly into the built index.html's <head> inside a
 * <style> tag on the server — but that patch will be overwritten the next
 * time the site is rebuilt, so prefer wiring it into the source above.
 */

:root {
  /* UZH corporate colours as CSS custom properties, for reference/reuse */
  --uzh-blue: #0028a5;
  --uzh-blue-v1: #bacbff;
  --uzh-blue-v2: #7596ff;
  --uzh-blue-v3: #3062ff;
  --uzh-blue-v4: #001e7c;
  --uzh-blue-v5: #001452;

  --uzh-cyan: #4ac9e3;
  --uzh-apple: #a5d233;
  --uzh-gold: #ffc845;
  --uzh-orange: #fc4c02;
  --uzh-berry: #bf0d3e;

  --uzh-black: #000000;
  --uzh-white: #ffffff;
  --uzh-grey-v1: #c2c2c2;
  --uzh-grey-v2: #a3a3a3;
  --uzh-grey-v3: #666666;
  --uzh-grey-v4: #4d4d4d;
  --uzh-grey-v5: #333333;
  --uzh-light-grey-v1: #fafafa;
}

html,
body {
  background-color: var(--uzh-white);
}

/* Respect the OS/app dark-mode preference for the pre-mount background too */
@media (prefers-color-scheme: dark) {
  html,
  body {
    background-color: #050b24; /* matches bg0 (dark) in uzh-theme-colors.ts */
  }
}

::selection {
  background-color: var(--uzh-blue-v1);
  color: var(--uzh-blue-v5);
}

:focus-visible {
  outline-color: var(--uzh-blue) !important;
}

a {
  color: var(--uzh-blue);
}

/* Scrollbar (Chromium / WebKit) */
::-webkit-scrollbar-thumb {
  background-color: var(--uzh-grey-v2);
  border-radius: 8px;
}
::-webkit-scrollbar-thumb:hover {
  background-color: var(--uzh-blue-v2);
}
::-webkit-scrollbar-track {
  background: transparent;
}

/* Scrollbar (Firefox) */
* {
  scrollbar-color: var(--uzh-grey-v2) transparent;
}
