/* FennicaCloud palette. Tailwind colors read these as "R G B" triplets, html.light swaps them. */
:root {
  color-scheme: dark;
  --zinc-50: 238 243 248;  --zinc-100: 225 232 240; --zinc-200: 203 213 225; --zinc-300: 180 193 209;
  --zinc-400: 148 163 184; --zinc-500: 132 148 171; --zinc-600: 107 123 146; --zinc-700: 58 71 89;
  --zinc-800: 38 50 67;    --zinc-900: 23 33 48;    --zinc-950: 15 23 34;

  --emerald-100: 204 251 241; --emerald-200: 153 246 228; --emerald-300: 94 234 212;
  --emerald-400: 45 212 191;  --emerald-500: 20 184 166;

  --violet-100: 219 231 255; --violet-200: 188 210 255; --violet-300: 147 180 255;
  --violet-400: 110 151 247; --violet-500: 79 123 232;

  --amber-300: 252 211 77;  --amber-400: 251 191 36;  --amber-500: 245 158 11;
  --rose-200: 254 205 211;  --rose-300: 253 164 175;  --rose-400: 251 113 133; --rose-500: 244 63 94;
  --sky-300: 125 211 252;   --sky-500: 14 165 233;
}

html.light {
  color-scheme: light;
  --zinc-50: 15 23 34;     --zinc-100: 23 33 48;    --zinc-200: 38 50 67;    --zinc-300: 51 65 85;
  --zinc-400: 71 85 105;   --zinc-500: 91 106 128;  --zinc-600: 100 116 139; --zinc-700: 169 182 198;
  --zinc-800: 213 221 231; --zinc-900: 255 255 255; --zinc-950: 243 246 249;

  --emerald-100: 19 78 74;  --emerald-200: 19 78 74;  --emerald-300: 17 94 89;
  --emerald-400: 15 118 110; --emerald-500: 13 148 136;

  --violet-100: 30 58 138;  --violet-200: 30 64 175; --violet-300: 29 78 216;
  --violet-400: 37 99 235;  --violet-500: 59 111 224;

  --amber-300: 146 64 14;   --amber-400: 180 83 9;    --amber-500: 217 119 6;
  --rose-200: 136 19 55;    --rose-300: 159 18 57;    --rose-400: 190 18 60;  --rose-500: 225 29 72;
  --sky-300: 3 105 161;     --sky-500: 2 132 199;
}

html { scrollbar-color: rgb(var(--zinc-700)) rgb(var(--zinc-950)); }
body { background-image: radial-gradient(1400px 420px at 50% -14%, rgb(var(--emerald-500) / .09), transparent 70%); }
html.light .glass { box-shadow: 0 1px 2px rgb(15 23 34 / .05), 0 4px 16px -8px rgb(15 23 34 / .08); }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: rgb(var(--zinc-950)); }
::-webkit-scrollbar-thumb { background: rgb(var(--zinc-800)); border-radius: 99px; border: 2px solid rgb(var(--zinc-950)); }
::-webkit-scrollbar-thumb:hover { background: rgb(var(--zinc-600)); }

mark { background: rgb(var(--emerald-500) / .28); color: rgb(var(--emerald-100)); border-radius: 3px; padding: 0 2px; }