/* ============================================================
   RECREATIVOS AVENIDA — Color & Type Foundations
   B2B hostelería supply. Serious, professional, industrial.
   Brand color is the logo navy (#001767), kept exact.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Barlow:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Barlow+Semi+Condensed:wght@500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root {
  /* ---------- BRAND ---------- */
  --logo-navy:   #001767; /* exact logo color (Grupo Hostelería Avenida) — never alter for lockups */

  /* ---------- BLUE SCALE (primary) ---------- */
  --blue-950: #050E2E; /* deepest — top bar / footer base            */
  --blue-900: #071A4D; /* dark structural bars, newsletter band      */
  --blue-800: #0B2570; /* nav bar, deep panels                       */
  --blue-700: #0E2F8C; /* PRIMARY — buttons, icon badges, links      */
  --blue-600: #1542B0; /* hover / lighter primary                    */
  --blue-500: #2B5BD4; /* bright accent, focus ring                  */
  --blue-300: #8FA9E6; /* decorative / disabled-on-dark              */
  --blue-100: #DCE5F8; /* tint fills, selected rows                  */
  --blue-50:  #EEF2FC; /* faint section tint                         */

  /* ---------- NEUTRALS (slate) ---------- */
  --ink:    #10141C; /* near-black                                   */
  --fg-1:   #1B2230; /* primary text                                 */
  --fg-2:   #46506280; /* (unused alpha guard)                       */
  --fg-2s:  #485162; /* secondary text                               */
  --fg-3:   #79839A; /* muted / captions                             */
  --fg-4:   #A6AFC0; /* placeholder, disabled                        */

  --line:    #E2E6EE; /* hairline borders                            */
  --line-2:  #CFD5E0; /* stronger borders / dividers                 */

  --surface:   #FFFFFF; /* cards, header                             */
  --surface-2: #F5F7FB; /* light gray section bg                     */
  --surface-3: #EAF0FA; /* light blue tint section                  */
  --surface-dk:#071A4D; /* dark section bg                           */

  /* ---------- SEMANTIC ---------- */
  --success:   #1E8A5B;  --success-bg: #E6F4ED;
  --warning:   #B97608;  --warning-bg: #FBF1DF;
  --danger:    #C5384B;  --danger-bg:  #FBE9EB;
  --info:      var(--blue-700);

  /* convenience */
  --on-dark:        #FFFFFF;
  --on-dark-muted:  #B9C4DE;

  /* ---------- TYPE FAMILIES ---------- */
  --font-display: 'Barlow Semi Condensed', 'Barlow', system-ui, sans-serif;
  --font-sans:    'Barlow', system-ui, -apple-system, sans-serif;
  --font-mono:    'IBM Plex Mono', ui-monospace, 'SFMono-Regular', monospace;

  /* ---------- TYPE SCALE ---------- */
  --text-xs:   12px;
  --text-sm:   14px;
  --text-base: 16px;
  --text-md:   18px;
  --text-lg:   20px;
  --text-xl:   24px;
  --text-2xl:  30px;
  --text-3xl:  38px;
  --text-4xl:  48px;
  --text-5xl:  60px;

  --lh-tight:   1.08;
  --lh-snug:    1.22;
  --lh-normal:  1.5;
  --lh-relaxed: 1.65;

  --tracking-tight: -0.01em;
  --tracking-normal: 0;
  --tracking-wide:  0.06em;  /* uppercase labels / nav */
  --tracking-wider: 0.12em;  /* eyebrows */

  /* ---------- RADII ---------- */
  --r-xs: 2px;
  --r-sm: 4px;
  --r-md: 6px;
  --r-lg: 10px;
  --r-xl: 14px;
  --r-pill: 999px;

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

  /* ---------- ELEVATION ---------- */
  --shadow-xs: 0 1px 2px rgba(7,26,77,0.06);
  --shadow-sm: 0 1px 3px rgba(7,26,77,0.08), 0 1px 2px rgba(7,26,77,0.06);
  --shadow-md: 0 4px 12px rgba(7,26,77,0.10);
  --shadow-lg: 0 12px 28px rgba(7,26,77,0.14);
  --shadow-focus: 0 0 0 3px rgba(43,91,212,0.30);

  /* ---------- LAYOUT ---------- */
  --container: 1280px;
  --header-h: 76px;
}

/* ============================================================
   SEMANTIC TYPE CLASSES
   ============================================================ */
.ra-display {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-5xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
}
.ra-h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-4xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
}
.ra-h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-3xl);
  line-height: var(--lh-snug);
  color: var(--fg-1);
}
.ra-h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-xl);
  line-height: var(--lh-snug);
  color: var(--fg-1);
}
.ra-section-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-2xl);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--blue-900);
}
.ra-eyebrow {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--text-sm);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  color: var(--blue-700);
}
.ra-nav-link {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-sm);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--fg-1);
}
.ra-lead {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--text-md);
  line-height: var(--lh-relaxed);
  color: var(--fg-2s);
}
.ra-body {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--text-base);
  line-height: var(--lh-normal);
  color: var(--fg-2s);
}
.ra-small {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--text-sm);
  line-height: var(--lh-normal);
  color: var(--fg-3);
}
.ra-label {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--fg-2s);
}
.ra-mono {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--text-sm);
  letter-spacing: 0;
  color: var(--fg-2s);
}
.ra-price {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-2xl);
  color: var(--blue-700);
}