/* Tokens de la web de presentación: limpia, estilo página de producto de Apple.
 * Blanco, gris muy claro y negro; un verde mar muy oscuro para el lado del cliente; el terracota del producto como
 * único acento. Una sola familia tipográfica (Geist). Todo color y toda fuente de site.css sale de aquí.
 */
:root {
  /* Superficies. */
  --color-white: #fff;
  --color-soft: #f5f5f7;
  --color-black: #0b0b0c;
  --color-black-2: #1b1b1d;
  --color-sea-dark: #0e2b2d;
  --color-sea-dark-2: #17393c;

  /* Texto. */
  --color-ink: #1d1d1f;
  --color-muted: #66666b;       /* 5,4:1 sobre blanco y 5:1 sobre gris claro */
  --color-on-dark: #f5f5f7;
  --color-on-dark-muted: #a8a8ad;
  --color-rule: #e2e2e6;
  --color-rule-dark: #333336;

  /* El acento: el terracota del producto. */
  --color-accent: #b3471f;
  --color-accent-hover: #963a18;
  --color-accent-on-dark: #f0855c;
  --color-on-accent: #fff;

  /* Lado del cliente: verde mar (el logotipo). */
  --color-sea: #1f5c60;

  /* Juntas de la demo de alicatado. */
  --color-grout-light: #f2f2f0;
  --color-grout-grey: #9a9a97;
  --color-grout-dark: #2e2e2c;

  /* Foco. */
  --color-focus: #0b5fd9;
  --color-focus-on-dark: #fff;

  /* Sombras de los dispositivos y las hojas: muy difusas, como luz de estudio. */
  --shadow-device: 0 2.5rem 5rem -1.5rem rgb(0 0 0 / 0.28), 0 0.75rem 1.5rem -0.75rem rgb(0 0 0 / 0.14);
  --shadow-sheet: 0 1.75rem 3.5rem -1rem rgb(0 0 0 / 0.2), 0 0.25rem 0.75rem rgb(0 0 0 / 0.05);
  --color-backdrop: rgb(0 0 0 / 0.5);

  /* Tipografía. */
  --font-body: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;

  --text-sm: 0.875rem;
  --text-base: 1.0625rem;
  --text-lg: clamp(1.125rem, 1.05rem + 0.35vw, 1.375rem);
  --text-xl: clamp(1.375rem, 1.2rem + 0.8vw, 2rem);
  --text-2xl: clamp(2.25rem, 1.45rem + 3.2vw, 4.5rem);
  --text-3xl: clamp(2.5rem, 1.45rem + 4.2vw, 5.25rem);
  --text-huge: clamp(4.5rem, 2rem + 11vw, 12rem);

  /* Espacios. */
  --space-2xs: 0.25rem;
  --space-xs: 0.5rem;
  --space-sm: 0.75rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2.5rem;
  --space-2xl: 4rem;
  --space-section: clamp(5.5rem, 11vw, 11rem);

  --gutter: clamp(1.25rem, 4vw, 3rem);
  --wrap: 80rem;
  --nav-h: 3.25rem;

  /* Radios. */
  --radius-control: 0.75rem;
  --radius-card: 1.75rem;
  --radius-pill: 999px;

  /* Movimiento. */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-micro: 150ms;
  --dur-short: 300ms;
  --dur-long: 900ms;

  /* Capas. */
  --z-raised: 10;
  --z-sticky: 200;
}