/* Pink · base.css — reset mínimo + utilities compartidas
 * Se carga ANTES de styles.css. Usa las variables de tokens.css.
 */

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

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-text);
  font-size: var(--size-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

body { min-height: var(--section-h); }

img, svg, video, canvas, picture { display: block; max-width: 100%; }

a { color: inherit; text-decoration: none; }

button {
  font: inherit;
  background: transparent;
  color: inherit;
  border: 0;
  padding: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

ul, ol { list-style: none; margin: 0; padding: 0; }

h1, h2, h3, h4, p { margin: 0; }

/* Full-bleed section base
 * -------------------------------------------------------------------- */
.section {
  position: relative;
  width: 100%;
  min-height: var(--section-h);
  padding: var(--pad-x-desktop);
}

@supports (min-height: 100svh) {
  @media (pointer: coarse) {
    .section { min-height: var(--section-h-coarse); }
  }
}

/* Placeholder de imagen — cuando no hay foto real
 * -------------------------------------------------------------------- */
.ph {
  background:
    linear-gradient(135deg,
      color-mix(in srgb, var(--nut) 60%, transparent) 0%,
      color-mix(in srgb, var(--pink) 30%, transparent) 100%);
  display: grid;
  place-items: center;
  color: var(--egg);
  font-family: var(--font-text);
  font-weight: var(--w-text-md);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  overflow: hidden;
}
.ph--nut  { background: var(--nut); }
.ph--pink { background: var(--pink); }
.ph--egg  { background: var(--egg-hard); color: var(--nut); }
.ph--ink  { background: var(--ink); color: var(--egg); }

/* Utilities cromáticas del sistema (nombres del estudio de referencia)
 * -------------------------------------------------------------------- */
.bgEgg  { background-color: var(--egg); }
.bgNut  { background-color: var(--nut); }
.bgPink { background-color: var(--pink); }
.bgInk  { background-color: var(--ink); }

.colorEgg     { color: var(--egg); }
.colorNut     { color: var(--nut); }
.colorPink    { color: var(--pink); }
.colorInk     { color: var(--ink); }
.colorEggHard { color: var(--egg-hard); }

.fill--pink { fill: var(--pink); }
.fill--egg  { fill: var(--egg); }
.fill--nut  { fill: var(--nut); }