/*
   EO MARKET · Espacio Ordenado
   colors_and_type.css — foundational design tokens
   "LIMPIO · FRESCO · NATURAL · ORGANIZADO"
   ============================================================ */

/* Fonts: Google Fonts substitutions (see README "Type").
   Display  → Fredoka (bubbly rounded, matches ÓPTIMO/ARMA TUS labels)
   Body/UI  → Quicksand (rounded geometric, matches the order form) */
@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@400;500;600;700&family=Quicksand:wght@400;500;600;700&display=swap');

:root {
  /* ---------- PRIMITIVE COLORS ---------- */
  /* Brand pinks */
  --eo-magenta:      #EC1C8C; /* primary hot pink — headlines, CTAs, logo accent */
  --eo-magenta-700:  #C71179; /* pressed / darker magenta */
  --eo-rose:         #E87BA0; /* softer rose — logo lockup background */
  --eo-pink-200:     #FBD2E1; /* pale pink — section/page backgrounds */
  --eo-pink-100:     #FDE8F0; /* lightest pink wash */

  /* Fruit / secondary palette (from the jar-lid label system) */
  --eo-lime:         #D3E021; /* chartreuse — energetic backgrounds, price chips */
  --eo-sky:          #A6DCEC; /* light blue — calm backgrounds (Mega Óptimo) */
  --eo-orange:       #F47920; /* melón / Súper Óptimo */
  --eo-yellow:       #FFD400; /* maracuyá / "revisar lista" highlight */
  --eo-purple:       #5B2A9D; /* uvas */
  --eo-red:          #E1251B; /* papaya / proteína res */

  /* Neutrals */
  --eo-cream:        #F4EFE3; /* off-white logo letters & warm paper */
  --eo-white:        #FFFFFF;
  --eo-ink:          #2B2A33; /* near-black headings on light */
  --eo-slate:        #454552; /* "Market" wordmark / body text */
  --eo-slate-500:    #6E6E7A; /* secondary text */
  --eo-slate-300:    #B6B6C0; /* borders, disabled */
  --eo-slate-100:    #ECECF1; /* hairlines, fills */

  /* ---------- SEMANTIC COLORS ---------- */
  --bg-page:         var(--eo-pink-100);
  --bg-surface:      var(--eo-white);
  --bg-surface-warm: var(--eo-cream);
  --bg-accent:       var(--eo-magenta);
  --bg-muted:        var(--eo-slate-100);

  --fg-default:      var(--eo-ink);
  --fg-muted:        var(--eo-slate-500);
  --fg-on-accent:    var(--eo-white);
  --fg-link:         var(--eo-magenta);

  --border-default:  var(--eo-slate-100);
  --border-strong:   var(--eo-slate-300);
  --border-accent:   var(--eo-magenta);

  --focus-ring:      color-mix(in oklab, var(--eo-magenta) 45%, transparent);

  /* status (kept on-brand) */
  --ok:   #2E9E5B;
  --warn: var(--eo-yellow);
  --err:  var(--eo-red);

  /* ---------- TYPE ---------- */
  --font-display: 'Fredoka', 'Baloo 2', system-ui, sans-serif;
  --font-body:    'Quicksand', system-ui, -apple-system, sans-serif;

  /* fluid-ish display scale (rounded, friendly, set tight & UPPERCASE) */
  --fs-display:  56px; --lh-display: 0.98 /* @kind font */; --ls-display: 0.5px;
  --fs-h1:       40px; --lh-h1: 1.05 /* @kind font */;
  --fs-h2:       30px; --lh-h2: 1.1 /* @kind font */;
  --fs-h3:       22px; --lh-h3: 1.2 /* @kind font */;
  --fs-lead:     19px; --lh-lead: 1.5 /* @kind font */;
  --fs-body:     16px; --lh-body: 1.55 /* @kind font */;
  --fs-sm:       14px; --lh-sm: 1.45 /* @kind font */;
  --fs-xs:       12px; --lh-xs: 1.4 /* @kind font */;

  --fw-reg: 400 /* @kind font */; --fw-med: 500 /* @kind font */; --fw-semi: 600 /* @kind font */; --fw-bold: 700 /* @kind font */;

  /* ---------- SPACING (4px base) ---------- */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px;
  --sp-12: 48px; --sp-16: 64px; --sp-20: 80px;

  /* ---------- RADII (very rounded brand) ---------- */
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-pill: 999px;

  /* ---------- SHADOWS (soft, low-contrast, no harsh black) ---------- */
  --shadow-sm:  0 1px 2px rgba(43,42,51,.06), 0 1px 3px rgba(43,42,51,.08);
  --shadow-md:  0 4px 12px rgba(43,42,51,.08), 0 2px 4px rgba(43,42,51,.06);
  --shadow-lg:  0 12px 32px rgba(43,42,51,.12), 0 4px 8px rgba(43,42,51,.06);
  --shadow-pink:0 8px 22px rgba(236,28,140,.28); /* magenta CTA glow */
}

/* ============================================================
   SEMANTIC ELEMENT DEFAULTS — apply by including this file
   ============================================================ */
.eo-display, h1.eo, .eo-h1, .eo-h2, .eo-h3 { font-family: var(--font-display); }

.eo-display {
  font-family: var(--font-display); font-weight: var(--fw-bold);
  font-size: var(--fs-display); line-height: var(--lh-display);
  letter-spacing: var(--ls-display); text-transform: uppercase;
  color: var(--eo-magenta);
}
.eo-h1 { font-weight: var(--fw-bold); font-size: var(--fs-h1); line-height: var(--lh-h1); color: var(--fg-default); }
.eo-h2 { font-weight: var(--fw-semi); font-size: var(--fs-h2); line-height: var(--lh-h2); color: var(--fg-default); }
.eo-h3 { font-weight: var(--fw-semi); font-size: var(--fs-h3); line-height: var(--lh-h3); color: var(--fg-default); }

.eo-lead { font-family: var(--font-body); font-weight: var(--fw-med); font-size: var(--fs-lead); line-height: var(--lh-lead); color: var(--fg-muted); }
.eo-body { font-family: var(--font-body); font-weight: var(--fw-med); font-size: var(--fs-body); line-height: var(--lh-body); color: var(--fg-default); }
.eo-sm   { font-family: var(--font-body); font-weight: var(--fw-med); font-size: var(--fs-sm); line-height: var(--lh-sm); color: var(--fg-muted); }

/* eyebrow / tagline treatment — spaced caps, used like "LIMPIO · FRESCO ..." */
.eo-eyebrow {
  font-family: var(--font-body); font-weight: var(--fw-bold);
  font-size: var(--fs-xs); letter-spacing: 1.5px; text-transform: uppercase;
}