/* 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;

  --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; }
}