/* Tema Medianoche. Colores, radios, tipografia y movimiento: todo sale de aqui. */
:root {
  color-scheme: dark;

  --bg: #080d17;
  --bg-2: #0c1423;
  --panel: #121b2b;
  --panel-2: #172337;
  --panel-3: #1c2a40;
  --text: #f5f8ff;
  --muted: #9aa8bd;
  --faint: #7c8ba3;
  --border: rgba(190, 209, 244, 0.115);
  --border-strong: rgba(176, 181, 253, 0.21);
  --shadow: rgba(0, 0, 0, 0.32);
  --glass: rgba(16, 24, 39, 0.86);
  --accent: #b7a7ff;
  --accent-2: #7b6bf0;
  --glow: rgba(155, 133, 255, 0.18);

  --sleep: #ae95ff;
  --water: #6abffa;
  --move: #d0fa72;
  --food: #ffbf94;
  --pink: #f69ac4;
  --status: #71d8b8;
  --amber: #f6b94a;
  --amber-ink: #2a1a02;

  --r-sm: 12px;
  --r-md: 18px;
  --r-lg: 22px;
  --r-xl: 28px;

  --font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Segoe UI", system-ui,
    sans-serif;

  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --band-h: 0px;
  --gutter: 19px;
  --tabbar-h: 66px;
  --tabbar-gap: max(12px, calc(var(--safe-bottom) - 12px));

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-sheet: cubic-bezier(0.32, 0.72, 0, 1);
}

:root[data-ensayo] {
  --band-h: 28px;
}