/* =========================================================================
   Bellavita Pescados — Foundations
   colors + type tokens, fonts, semantic helpers.
   Import this file at the top of any Bellavita HTML artifact.
   ========================================================================= */

/* --- Fonts -----------------------------------------------------------------
   PRIMARY: Avenir LT Pro
   - Roman: textos, menus, formulários e parágrafos.
   - Black: títulos, chamadas, cards de destaque e CTAs.

   Arquivos esperados:
   assets/fontes/avenirltproroman-webfont.woff2
   assets/fontes/avenirltproroman-webfont.woff
   assets/fontes/avenirltproblack-webfont.woff2
   assets/fontes/avenirltproblack-webfont.woff
   ------------------------------------------------------------------------ */

@font-face {
  font-family: 'Avenir LT Pro';
  src: url('assets/fontes/avenirltproroman-webfont.woff2') format('woff2'),
       url('assets/fontes/avenirltproroman-webfont.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Avenir LT Pro';
  src: url('assets/fontes/avenirltproblack-webfont.woff2') format('woff2'),
       url('assets/fontes/avenirltproblack-webfont.woff') format('woff');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* === Brand palette ====================================================== */
  --navy-900: #191C36;   /* primary type, footer, hero overlay */
  --navy-800: #2A2E4A;
  --navy-700: #3D4262;

  --blue-500: #6E89BC;   /* hover-press of blue-400 */
  --blue-400: #829ECF;   /* brand blue — buttons, accents, waves */
  --blue-300: #A3B8DC;
  --blue-200: #C5D2E8;
  --blue-100: #E4EBF4;   /* tinted backgrounds */
  --blue-50:  #F1F5FB;

  --cream-100: #F2E8D4;
  --cream-50:  #F9F1E4;  /* warm alternate background */
  --cream-25:  #FCF8F0;

  --gray-900: #1A1D24;
  --gray-700: #4A4F5A;
  --gray-500: #7C8290;
  --gray-300: #B8BDC7;
  --gray-200: #C9CDD4;
  --gray-100: #DADADA;   /* borders, dividers */
  --gray-50:  #F2F3F5;
  --white:    #FFFFFF;

  --danger:   #C0383E;
  --success:  #2F8055;
  --warning:  #B47A1F;

  /* === Semantic surfaces ================================================== */
  --bg:           var(--white);
  --bg-alt:       var(--cream-50);
  --bg-tint:      var(--blue-50);
  --bg-inverse:   var(--navy-900);

  --fg:           var(--navy-900);
  --fg-muted:     var(--gray-700);
  --fg-subtle:    var(--gray-500);
  --fg-inverse:   var(--white);
  --fg-onBrand:   var(--white);

  --border:       rgba(25, 28, 54, 0.08);
  --border-strong: var(--gray-100);
  --divider:      var(--gray-100);

  --brand:        var(--blue-400);
  --brand-strong: var(--navy-900);
  --brand-hover:  var(--blue-500);

  /* === Type =============================================================== */
  --font-display: 'Avenir LT Pro', Arial, Helvetica, system-ui, -apple-system, sans-serif;
  --font-body:    'Avenir LT Pro', Arial, Helvetica, system-ui, -apple-system, sans-serif;

  --fs-eyebrow:   12px;
  --fs-caption:   13px;
  --fs-body-sm:   14px;
  --fs-body:      16px;
  --fs-body-lg:   18px;
  --fs-h4:        20px;
  --fs-h3:        24px;
  --fs-h2:        clamp(28px, 3vw, 40px);
  --fs-h1:        clamp(40px, 5.5vw, 72px);
  --fs-display:   clamp(56px, 8vw, 112px);

  --lh-tight:   1.05;
  --lh-snug:    1.2;
  --lh-normal:  1.5;
  --lh-loose:   1.7;
  --lh-body:    1.55;

  --tracking-tight:   -0.02em;
  --tracking-display: -0.01em;
  --tracking-normal:  0;
  --tracking-wide:    0.06em;
  --tracking-eyebrow: 0.12em;

  /* === Spacing scale (4px base) =========================================== */
  --space-0:  0;
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;
  --space-9:  96px;
  --space-10: 128px;

  /* === Radii ============================================================== */
  --r-xs:   4px;
  --r-sm:   6px;
  --r-md:   12px;
  --r-lg:   20px;
  --r-xl:   32px;
  --r-full: 9999px;

  /* === Shadows ============================================================ */
  --shadow-xs: 0 1px 1px rgba(25, 28, 54, 0.04);
  --shadow-sm: 0 1px 2px rgba(25, 28, 54, 0.06), 0 1px 1px rgba(25, 28, 54, 0.03);
  --shadow-md: 0 8px 20px -8px rgba(25, 28, 54, 0.12), 0 2px 6px -2px rgba(25, 28, 54, 0.05);
  --shadow-lg: 0 24px 48px -16px rgba(25, 28, 54, 0.18), 0 6px 12px -4px rgba(25, 28, 54, 0.08);
  --shadow-xl: 0 40px 80px -24px rgba(25, 28, 54, 0.24);

  /* === Motion ============================================================= */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 150ms;
  --dur-base: 250ms;
  --dur-slow: 400ms;

  /* === Layout ============================================================= */
  --container-max: 1200px;
  --container-pad: clamp(24px, 4vw, 48px);
  --header-h:      80px;
}

/* === Base ================================================================ */
html { box-sizing: border-box; }
*, *::before, *::after { box-sizing: inherit; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* === Semantic type helpers ================================================ */

.display, h1.display {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: var(--fs-display);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-display);
  text-transform: uppercase;
  color: var(--fg);
  margin: 0;
}

h1, .h1 {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: var(--fs-h1);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-display);
  color: var(--fg);
  margin: 0;
}

h2, .h2 {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: var(--fs-h2);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-display);
  color: var(--fg);
  margin: 0;
}

h3, .h3 {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: var(--fs-h3);
  line-height: var(--lh-snug);
  color: var(--fg);
  margin: 0;
}

h4, .h4 {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: var(--fs-h4);
  line-height: var(--lh-snug);
  color: var(--fg);
  margin: 0;
}

p, .body { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--fg-muted); margin: 0; }
.body-lg { font-size: var(--fs-body-lg); line-height: var(--lh-body); }
.body-sm { font-size: var(--fs-body-sm); line-height: var(--lh-normal); }
.caption  { font-size: var(--fs-caption); line-height: var(--lh-normal); color: var(--fg-subtle); }

.eyebrow {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 900;
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--brand);
}

/* === Focus ring (do not remove) =========================================== */
:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}

/* === Selection =========================================================== */
::selection {
  background: var(--blue-200);
  color: var(--navy-900);
}