/* Paleta y tipografías del diseño. Cambiando estos valores cambia todo el sitio. */
:root{
  --background-50: 0.99 0.004 95;   --background-100: 0.972 0.009 93;
  --background-200: 0.945 0.015 92; --background-300: 0.905 0.021 90;
  --background-400: 0.85 0.025 88;  --background-500: 0.78 0.027 86;
  --background-600: 0.68 0.025 84;  --background-700: 0.56 0.021 82;
  --background-800: 0.44 0.017 80;  --background-900: 0.33 0.013 78;
  --background-950: 0.22 0.009 76;

  --foreground-50: 0.97 0.003 80;   --foreground-100: 0.94 0.005 80;
  --foreground-200: 0.88 0.006 80;  --foreground-300: 0.78 0.008 80;
  --foreground-400: 0.66 0.01 80;   --foreground-500: 0.55 0.011 80;
  --foreground-600: 0.45 0.011 80;  --foreground-700: 0.36 0.011 80;
  --foreground-800: 0.27 0.01 80;   --foreground-900: 0.2 0.008 80;
  --foreground-950: 0.14 0.007 80;

  --primary-50: 0.97 0.03 138;      --primary-100: 0.94 0.06 138;
  --primary-200: 0.89 0.1 138;      --primary-300: 0.83 0.14 138;
  --primary-400: 0.77 0.17 138;     --primary-500: 0.72 0.18 138;
  --primary-600: 0.64 0.16 138;     --primary-700: 0.54 0.14 138;
  --primary-800: 0.44 0.11 138;     --primary-900: 0.36 0.09 138;
  --primary-950: 0.25 0.06 138;

  --accent-50: 0.97 0.021 85;       --accent-100: 0.94 0.05 85;
  --accent-200: 0.89 0.09 84;       --accent-300: 0.84 0.12 84;
  --accent-400: 0.79 0.14 83;       --accent-500: 0.75 0.15 82;
  --accent-600: 0.67 0.14 80;       --accent-700: 0.57 0.13 78;
  --accent-800: 0.47 0.11 76;       --accent-900: 0.38 0.09 74;
  --accent-950: 0.27 0.06 72;

  --secondary-50: 0.97 0.015 150;   --secondary-100: 0.93 0.03 150;
  --secondary-200: 0.87 0.05 150;   --secondary-300: 0.79 0.07 150;
  --secondary-400: 0.7 0.08 150;    --secondary-500: 0.61 0.085 150;
  --secondary-600: 0.53 0.08 150;   --secondary-700: 0.44 0.07 150;
  --secondary-800: 0.36 0.055 150;  --secondary-900: 0.29 0.045 150;
  --secondary-950: 0.2 0.03 150;

  /* La cabecera es fija: mide 64 px y 80 px de tablet en adelante. Lo que
     vaya pegado arriba del todo tiene que dejarle sitio o queda tapado. */
  --alto-cabecera: 64px;

  --font-heading: 'Bricolage Grotesque', ui-sans-serif, system-ui, sans-serif;
  --font-body: 'Manrope', ui-sans-serif, system-ui, sans-serif;
}

@media (min-width: 768px) {
  :root { --alto-cabecera: 80px; }
}