/* Cores e base — os mesmos valores do GitBook das Regras Oceania (tema claro e escuro). */

:root {
  color-scheme: light;
  --primary-1: 255 255 255;
  --primary-2: 247 251 251;
  --primary-3: 242 249 250;
  --primary-4: 234 245 247;
  --primary-5: 226 240 243;
  --primary-6: 215 233 237;
  --primary-7: 200 222 226;
  --primary-8: 185 210 215;
  --primary-9: 0 98 112;
  --primary-10: 55 134 148;
  --primary-11: 89 115 121;
  --primary-12: 25 30 31;

  --tint-1: 255 255 255;
  --tint-2: 247 251 252;
  --tint-3: 241 249 251;
  --tint-4: 233 245 248;
  --tint-5: 225 241 244;
  --tint-6: 214 234 238;
  --tint-7: 198 222 227;
  --tint-8: 183 210 216;
  --tint-9: 56 147 164;
  --tint-10: 41 135 152;
  --tint-11: 87 116 122;
  --tint-12: 25 30 32;

  --neutral-3: 247 247 247;
  --neutral-6: 229 229 229;
  --neutral-9: 120 120 120;
  --neutral-11: 110 110 110;
  --neutral-12: 29 29 29;

  --info-3: 247 247 247;
  --info-9: 120 120 120;
  --success-3: 238 252 240;
  --success-9: 0 201 80;
  --warning-3: 255 245 236;
  --warning-9: 254 154 0;
  --danger-3: 255 242 239;
  --danger-9: 251 44 54;

  /* atalhos */
  --bg: rgb(var(--tint-1));
  --text: rgb(var(--tint-12));
  --text-muted: rgb(var(--tint-12) / 0.64);
  --text-subtle: rgb(var(--tint-11));
  --border: rgb(var(--tint-6));
  --border-strong: rgb(var(--tint-7));
  --accent: rgb(var(--primary-9));
  --accent-text: rgb(var(--primary-9));
  --accent-soft: rgb(var(--primary-3));
  --hover: rgb(var(--tint-4));
  --header-bg: rgb(var(--tint-1) / 0.88);
  --header-line: rgb(var(--tint-12) / 0.08);
  --shadow-sm: 0 1px 2px rgb(var(--tint-12) / 0.06);
  --shadow-md: 0 4px 16px rgb(var(--tint-12) / 0.08), 0 1px 3px rgb(var(--tint-12) / 0.06);
  --shadow-lg: 0 24px 64px rgb(var(--tint-12) / 0.18), 0 2px 8px rgb(var(--tint-12) / 0.08);
  --font: 'Inter', 'Inter Fallback', 'Segoe UI Emoji', 'Apple Color Emoji', 'Noto Color Emoji', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, Consolas, monospace;
  /* emoji: primeiro a fonte do próprio sistema (vetorial, nítida em qualquer tamanho); a do Google só se não houver */
  --emoji: 'Segoe UI Emoji', 'Apple Color Emoji', 'Noto Color Emoji', sans-serif;
}

html.dark {
  color-scheme: dark;
  --primary-1: 29 29 29;
  --primary-2: 32 35 36;
  --primary-3: 40 45 46;
  --primary-4: 41 49 51;
  --primary-5: 44 56 58;
  --primary-6: 46 60 63;
  --primary-7: 53 71 75;
  --primary-8: 60 82 87;
  --primary-9: 0 98 112;
  --primary-10: 80 157 172;
  --primary-11: 170 198 204;
  --primary-12: 249 255 255;

  --tint-1: 0 30 46;
  --tint-2: 4 36 52;
  --tint-3: 15 46 63;
  --tint-4: 19 50 67;
  --tint-5: 26 56 74;
  --tint-6: 30 61 78;
  --tint-7: 41 71 89;
  --tint-8: 52 82 101;
  --tint-9: 108 141 161;
  --tint-10: 115 148 169;
  --tint-11: 180 194 202;
  --tint-12: 252 255 255;

  --neutral-3: 44 44 44;
  --neutral-6: 57 57 57;
  --neutral-9: 120 120 120;
  --neutral-11: 192 192 192;
  --neutral-12: 255 255 255;

  --info-3: 44 44 44;
  --info-9: 144 144 144;
  --success-3: 37 47 38;
  --success-9: 0 201 80;
  --warning-3: 50 42 35;
  --warning-9: 254 154 0;
  --danger-3: 55 39 38;
  --danger-9: 251 44 54;

  --accent-text: rgb(var(--primary-10));
  --header-bg: rgb(var(--tint-1) / 0.88);
  --header-line: rgb(var(--tint-12) / 0.08);
  --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.3);
  --shadow-md: 0 4px 16px rgb(0 0 0 / 0.35), 0 1px 3px rgb(0 0 0 / 0.3);
  --shadow-lg: 0 24px 64px rgb(0 0 0 / 0.5), 0 2px 8px rgb(0 0 0 / 0.35);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.625;
  font-feature-settings: 'cv11', 'ss01';
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

a {
  color: inherit;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
}

img {
  max-width: 100%;
}

.ico {
  flex: none;
  display: block;
}

::selection {
  background: rgb(var(--primary-9) / 0.22);
}

:focus-visible {
  outline: 2px solid rgb(var(--primary-9));
  outline-offset: 2px;
}

/* barras de rolagem discretas */
* {
  scrollbar-width: thin;
  scrollbar-color: rgb(var(--tint-12) / 0.18) transparent;
}
*::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
*::-webkit-scrollbar-thumb {
  background: rgb(var(--tint-12) / 0.18);
  border-radius: 8px;
}
*::-webkit-scrollbar-track {
  background: transparent;
}

kbd {
  font-family: var(--font-mono);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}