/* Reset enxuto e a paleta do lago. */

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

:root {
  /* A UI inteira é escura; sem isto, controles nativos (inputs, selects,
     barra de rolagem) nasceriam claros e gritando no meio do lago. */
  color-scheme: dark;

  /* Água */
  --water-deep:    #0b2a31;
  --water-mid:     #14454e;
  --water-shallow: #1d6470;
  --caustic:       #8fe3e8;

  /* Superfície e margem */
  --lily-green:    #2f7d52;
  --lily-light:    #45a56b;
  --stone:         #6b6f6a;

  /* UI */
  --ink:           #f2f6f4;
  --ink-dim:       #a9bfc0;
  --panel:         rgba(8, 30, 35, 0.88);
  --panel-edge:    rgba(143, 227, 232, 0.22);
  --accent:        #f0b429;
  --accent-soft:   #f7d67a;

  --font: ui-rounded, 'Hiragino Maru Gothic ProN', 'Nunito', system-ui, -apple-system, sans-serif;

  /* Respeita a área segura de celulares com notch. */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
  background: var(--water-deep);
  font-family: var(--font);
  color: var(--ink);
  /* Sem realce azul de toque nem seleção acidental ao alimentar rápido. */
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

button {
  font: inherit;
  color: inherit;
  cursor: pointer;
  border: 0;
  background: none;
}

/* O `user-select: none` global protege o lago dos toques rápidos, mas nos
   campos texto é texto: sem isto não dá para selecionar nem corrigir o nome. */
input, textarea {
  user-select: text;
  -webkit-user-select: text;
}

:focus-visible {
  outline: 2px solid var(--accent-soft);
  outline-offset: 2px;
}