/* Tokens de Almendra. Colores, tipografías y espacios salen solo de acá. */
:root {
  /* Color: la paleta del logo (naranja, negro carbón y crema) */
  --crema: #f7f1e8;          /* fondo */
  --crema-suave: #efe6d8;    /* secciones alternas */
  --papel: #fffcf7;          /* tarjetas y campos */
  --tinta: #1c1714;          /* texto principal (negro carbón del logo) */
  --tinta-suave: #5f5248;    /* texto secundario (6.7:1 sobre crema) */
  --naranja: #f29a2e;        /* naranja del logo: botones y detalles, nunca texto sobre crema (2:1) */
  --naranja-hover: #e38b1f;
  --naranja-texto: #9a4e07;  /* naranja como texto, links e íconos sobre crema (5.4:1) */
  --tostado: #1c1714;        /* sección oscura */
  --tostado-borde: #3a302a;
  --sobre-oscuro: #f7f1e8;
  --sobre-oscuro-suave: #cbbfb1;
  --acento-oscuro: #f29a2e;  /* naranja sobre la sección oscura (8:1) */
  --borde: #ddd0bf;
  --error: #a3261b;
  --sobre-naranja: #1c1714;   /* texto de los botones naranjas, en los dos modos */
  --campo-fondo: #ffffff;
  --campo-borde: #b9ab99;
  --navegador-barra: #ece5db; /* barra del navegador de la captura */

  /* Tipografía */
  --fuente-titulos: 'Outfit', system-ui, -apple-system, 'Segoe UI', sans-serif; /* geométrica, como la letra del logo */
  --fuente-texto: 'Instrument Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --texto-base: 1.0625rem;
  --texto-chico: 0.9375rem;
  --titulo-hero: clamp(2.5rem, 7vw, 4.75rem);
  --titulo-seccion: clamp(1.875rem, 4.2vw, 2.75rem);
  --titulo-tarjeta: 1.25rem;

  /* Espacios */
  --gutter: 16px;
  --ancho-max: 1120px;
  --seccion-y: clamp(4rem, 9vw, 7rem);
  --radio: 14px;
  --radio-chico: 10px;
  --sombra: 0 18px 40px -18px rgba(42, 33, 26, 0.35);
}

@media (min-width: 640px) {
  :root { --gutter: 24px; }
}

/* Modo oscuro: sigue al sistema salvo que el usuario elija con el botón (data-tema en <html>).
   Los mismos valores van en los dos bloques. */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    color-scheme: dark;
    --crema: #1c1714;
    --crema-suave: #241e1a;
    --papel: #2b241f;
    --tinta: #f7f1e8;
    --tinta-suave: #cbbfb1;
    --naranja-texto: #f29a2e;
    --tostado: #110e0b;
    --tostado-borde: #2f2722;
    --borde: #3a302a;
    --error: #ff9b8c;
    --campo-fondo: #1c1714;
    --campo-borde: #6b5d52;
    --navegador-barra: #3a302a;
    --sombra: 0 18px 40px -18px rgba(0, 0, 0, 0.7);
  }
}
:root[data-tema="oscuro"] {
  color-scheme: dark;
  --crema: #1c1714;
  --crema-suave: #241e1a;
  --papel: #2b241f;
  --tinta: #f7f1e8;
  --tinta-suave: #cbbfb1;
  --naranja-texto: #f29a2e;
  --tostado: #110e0b;
  --tostado-borde: #2f2722;
  --borde: #3a302a;
  --error: #ff9b8c;
  --campo-fondo: #1c1714;
  --campo-borde: #6b5d52;
  --navegador-barra: #3a302a;
  --sombra: 0 18px 40px -18px rgba(0, 0, 0, 0.7);
}