/* Snow Community — global design tokens (shared by every widget + the shell).
   Widgets consume these via var(...) so the merged page stays visually coherent.
   Scoped widget styles live in each widget's style.css (shadow root).

   The palette is the SNOW Campus Community one, lifted from Loading Screen.html
   so the loading screen, the sign-in page and the app are visibly the same
   product: a deep teal-navy with a single green accent. The three background
   stops and the accent are taken verbatim from that file; the rest of the ramp
   is derived from them, darkest to lightest, so nothing here is a colour the
   loading screen does not already contain. */

:root {
  /* Verbatim from Loading Screen.html. */
  --snow-deep: #031d2a;
  --snow-mid: #07384d;
  --snow-dark: #021b28;
  --snow-green: #79d63d;
  --snow-glow: rgba(11, 96, 124, .28);

  /* The ramp, derived. Surfaces get lighter as they come forward, so a raised
     panel is lighter than the page behind it rather than darker. */
  --color-bg: #031d2a;
  --color-surface: #07384d;
  --color-surface-2: #0d3b52;
  --color-border: #1d4f66;
  --color-text: #eaf4f7;
  --color-muted: #9dbfcc;
  --color-accent: #79d63d;
  --color-accent-2: #7fd4f0;
  --color-danger: #ff8a80;
  --color-success: #6ee7a8;

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;

  --font-ui: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono: ui-monospace, 'Cascadia Code', 'Courier New', monospace;

  /* Shadows on a dark surface need to be softer, not harder: a strong black
     shadow on near-black reads as a smudge rather than as depth. */
  --shadow-1: 0 1px 3px rgba(0, 0, 0, .3);
  --shadow-2: 0 8px 22px rgba(0, 0, 0, .45);

  --shell-header-h: 56px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  /* The loading screen's own background, so the first frame and the frame it
     hands over to are the same colour and the transition is not a flash. */
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-ui);
  font-size: 15px;
  line-height: 1.5;
}

a { color: var(--color-accent-2); }
code { font-family: var(--font-mono); font-size: 0.9em; }