/*
 * The default theme — and the reference every other theme is held to.
 *
 * **A theme is complete**: it declares every token this file declares, and no other
 * (organisations/tests/test_themes.py). The editor writes no colour of its own: its
 * classes name these families (`bg-primary-600`, `text-neutral-500`), and the Tailwind
 * config in static/js/tailwind-theme.js maps each to its variable here. So these
 * values are Tailwind's own, and this theme is how the editor looked before themes.
 *
 * Colours are three channels, `R G B`, so that Tailwind's opacity modifiers work:
 * `bg-danger-50/40` is `rgb(var(--danger-50) / 0.4)`.
 *
 * **Not here, and not themeable: a gate's colours** (`--gate-*`). A red gate is red in
 * every organisation; the page takes them from ski_gates_styles, like every chart.
 *
 * Loaded after the editor's own styles, so a theme may also restyle any rule outright:
 * `.site-header`, `.site-brand`, `.site-footer` and `.card` are there to be restyled.
 * A Tailwind utility can win a tie with a theme's rule, so give such a rule an
 * `html` in front.
 */

:root {
  /* primary — what can be pressed, chosen or followed: buttons, links, focus, the selected */
  --primary-50: 239 246 255;
  --primary-100: 219 234 254;
  --primary-200: 191 219 254;
  --primary-300: 147 197 253;
  --primary-400: 96 165 250;
  --primary-500: 59 130 246;
  --primary-600: 37 99 235;
  --primary-700: 29 78 216;
  --primary-800: 30 64 175;
  --primary-900: 30 58 138;
  --primary-950: 23 37 84;

  /* neutral — text, borders, surfaces — almost everything */
  --neutral-50: 249 250 251;
  --neutral-100: 243 244 246;
  --neutral-200: 229 231 235;
  --neutral-300: 209 213 219;
  --neutral-400: 156 163 175;
  --neutral-500: 107 114 128;
  --neutral-600: 75 85 99;
  --neutral-700: 55 65 81;
  --neutral-800: 31 41 55;
  --neutral-900: 17 24 39;
  --neutral-950: 3 7 18;

  /* danger — errors, problems, deleting */
  --danger-50: 254 242 242;
  --danger-100: 254 226 226;
  --danger-200: 254 202 202;
  --danger-300: 252 165 165;
  --danger-400: 248 113 113;
  --danger-500: 239 68 68;
  --danger-600: 220 38 38;
  --danger-700: 185 28 28;
  --danger-800: 153 27 27;
  --danger-900: 127 29 29;
  --danger-950: 69 10 10;

  /* success — done, present, fine */
  --success-50: 240 253 244;
  --success-100: 220 252 231;
  --success-200: 187 247 208;
  --success-300: 134 239 172;
  --success-400: 74 222 128;
  --success-500: 34 197 94;
  --success-600: 22 163 74;
  --success-700: 21 128 61;
  --success-800: 22 101 52;
  --success-900: 20 83 45;
  --success-950: 5 46 22;

  /* warning — warnings, and notifications about a gate */
  --warning-50: 254 252 232;
  --warning-100: 254 249 195;
  --warning-200: 254 240 138;
  --warning-300: 253 224 71;
  --warning-400: 250 204 21;
  --warning-500: 234 179 8;
  --warning-600: 202 138 4;
  --warning-700: 161 98 7;
  --warning-800: 133 77 14;
  --warning-900: 113 63 18;
  --warning-950: 66 32 6;

  /* notice — what is stale or needs a look: a delivery out of date, a CSV */
  --notice-50: 255 251 235;
  --notice-100: 254 243 199;
  --notice-200: 253 230 138;
  --notice-300: 252 211 77;
  --notice-400: 251 191 36;
  --notice-500: 245 158 11;
  --notice-600: 217 119 6;
  --notice-700: 180 83 9;
  --notice-800: 146 64 14;
  --notice-900: 120 53 15;
  --notice-950: 69 26 3;

  /* info — information boxes and messages; the slalom badge */
  --info-50: 239 246 255;
  --info-100: 219 234 254;
  --info-200: 191 219 254;
  --info-300: 147 197 253;
  --info-400: 96 165 250;
  --info-500: 59 130 246;
  --info-600: 37 99 235;
  --info-700: 29 78 216;
  --info-800: 30 64 175;
  --info-900: 30 58 138;
  --info-950: 23 37 84;

  /* The page and its frame */
  --page-bg: 249 250 251;
  --header-bg: 255 255 255;
  --header-fg: 17 24 39;
  --header-muted: 75 85 99;
  --header-border: 229 231 235;
  --footer-fg: 107 114 128;
  --logo-height: 2rem;

  /* Type */
  --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
               "Segoe UI Symbol", "Noto Color Emoji";

  /* Corners */
  --radius-sm: 0.25rem;
  --radius-md: 0.375rem;
  --radius-lg: 0.5rem;
  --radius-xl: 0.75rem;
}
