/* Design tokens de "El recetario de la Georgi".
   Fuente única: assets/marca/brandbook.md §10, tal como quedaron en el mockup
   aprobado (docs/mockup-recetario.html). No redefinir colores fuera de aquí. */

:root {
  /* Marca */
  --morado: #7A3E92;
  --morado-700: #5F2E75;
  --paper: #F5F0F4;
  --surface: #FFFFFF;
  --surface-2: #FBF7FB;
  --ink: #2A2230;
  --ink-soft: #6B5E74;
  --line: #E7DBE9;
  --choclo: #F5B430;
  --shell: #EDE6EE;
  --shell-ink: #3A2E42;

  /* Colores por plato: base / deep / on */
  --c-rojo: #C33D2E;         --cd-rojo: #A32E22;         --con-rojo: #fff;
  --c-naranja: #E4712B;      --cd-naranja: #C25A1C;      --con-naranja: #2A2230;
  --c-ambar: #E9A83B;        --cd-ambar: #C98A2E;        --con-ambar: #2A2230;
  --c-amarillo: #F2B01E;     --cd-amarillo: #CF9412;     --con-amarillo: #2A2230;
  --c-lima: #7FB03A;         --cd-lima: #6A9630;         --con-lima: #2A2230;
  --c-verde: #2E9E5B;        --cd-verde: #26824A;        --con-verde: #2A2230;
  --c-verdeoscuro: #4E7D3A;  --cd-verdeoscuro: #3D6330;  --con-verdeoscuro: #fff;
  --c-morado: #7A3E92;       --cd-morado: #5F2E75;       --con-morado: #fff;
  --c-terracota: #A9552F;    --cd-terracota: #8A4526;    --con-terracota: #fff;
  --c-marron: #8A5A3B;       --cd-marron: #6E472E;       --con-marron: #fff;
  --c-dorado: #C98A2E;       --cd-dorado: #A87121;       --con-dorado: #2A2230;

  /* Banda: el color del plato llevado a donde el texto blanco alcanza 4,5:1.
     Los seis platos claros no lo logran en su tono base —amarillo da 1,91:1 y
     ámbar 2,07:1—, así que se rebajan hacia la tinta lo mínimo necesario. Los
     cinco oscuros ya pasan y quedan intactos. La usan la cabecera y el pie de
     la receta; el resto de la página sigue con el color de plato sin tocar. */
  --cb-rojo: #C33D2E;         /* sin cambio, 5.21:1 */
  --cb-naranja: #B75E2C;      /* 76% del base, 4.52:1 */
  --cb-ambar: #976E36;        /* 57%, 4.57:1 */
  --cb-amarillo: #966F26;     /* 54%, 4.57:1 */
  --cb-lima: #628037;         /* 66%, 4.50:1 */
  --cb-verde: #2D8653;        /* 81%, 4.52:1 */
  --cb-verdeoscuro: #4E7D3A;  /* sin cambio, 4.86:1 */
  --cb-morado: #7A3E92;       /* sin cambio, 7.16:1 */
  --cb-terracota: #A9552F;    /* sin cambio, 5.21:1 */
  --cb-marron: #8A5A3B;       /* sin cambio, 5.82:1 */
  --cb-dorado: #9C6D2F;       /* 72%, 4.52:1 */

  --font-display: 'Baloo 2', system-ui, sans-serif;
  --font-sans: 'Nunito Sans', system-ui, -apple-system, sans-serif;

  --radius-sm: 10px;
  --radius-md: 18px;
  --radius-lg: 28px;
  --pill: 999px;

  --shadow-sm: 0 2px 8px rgba(42, 34, 48, .06);
  --shadow-md: 0 12px 32px rgba(42, 34, 48, .14);
  --shadow-lg: 0 24px 60px rgba(42, 34, 48, .20);

  --wrap: 1160px;
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 800;
  line-height: 1.12;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0; }
img { max-width: 100%; display: block; }
a { color: var(--morado-700); }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}