/* ============================================================
   Eggies Design System — Colors & Type
   Source: MIV Eggies + eggies_new_design_tokens.json
   ============================================================ */

/* ---------- Fonts ---------- */
@font-face {
  font-family: 'Bree';
  src: url('fonts/Bree-Light.otf') format('opentype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Bree';
  src: url('fonts/Bree-LightOblique.otf') format('opentype');
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Bree';
  src: url('fonts/Bree-Regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Bree';
  src: url('fonts/Bree-Oblique.otf') format('opentype');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Bree';
  src: url('fonts/Bree-Bold.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Bree';
  src: url('fonts/Bree-BoldOblique.otf') format('opentype');
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Bree';
  src: url('fonts/Bree-ExtraBold.otf') format('opentype');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Bree';
  src: url('fonts/Bree-ExtraBoldOblique.otf') format('opentype');
  font-weight: 800;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Bree Serif';
  src: url('fonts/BreeSerif-Regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Lora — primary heading/body per MIV. Not shipped as OTF; pulled from Google Fonts. */
@import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,700&display=swap');

:root {
  /* ---------- Brand Palette ---------- */
  --egg-yellow:        #FFDF92;   /* Primary — Amarelo    */
  --egg-pink:          #EA9FAF;   /* Primary — Rosa       */
  --egg-brown:         #5C403C;   /* Secondary — Marrom Escuro */
  --egg-terracotta:    #A56C48;   /* Secondary — Terracota */
  --egg-black:         #000000;
  --egg-white:         #FFFFFF;

  /* Soft surface tones derived from palette (for backgrounds, not in MIV table but used in product) */
  --egg-cream:         #FFF7E3;   /* very light yellow wash */
  --egg-blush:         #FAE0E6;   /* very light pink wash  */
  --egg-brown-soft:    #7A5751;   /* brown tint for secondary text */

  /* ---------- Semantic Foreground / Background ---------- */
  --fg-1:              var(--egg-brown);         /* primary text */
  --fg-2:              var(--egg-brown-soft);    /* secondary text */
  --fg-3:              var(--egg-terracotta);    /* muted / captions */
  --fg-inverse:        var(--egg-white);

  --bg-0:              var(--egg-white);         /* page */
  --bg-1:              var(--egg-cream);         /* raised surface */
  --bg-2:              var(--egg-blush);         /* alt raised */
  --bg-dark:           var(--egg-brown);         /* footer / dark sections */

  /* ---------- Accents (CTA & Status) ---------- */
  --accent-primary:    var(--egg-terracotta);    /* primary CTA */
  --accent-primary-fg: var(--egg-white);
  --accent-secondary:  var(--egg-yellow);
  --accent-secondary-fg: var(--egg-brown);
  --accent-highlight:  var(--egg-pink);
  --accent-highlight-fg: var(--egg-brown);

  /* ---------- Borders & Lines ---------- */
  --border-soft:       rgba(92, 64, 60, 0.12);
  --border-strong:     rgba(92, 64, 60, 0.32);
  --border-focus:      var(--egg-yellow);

  /* ---------- Shadows ---------- */
  --shadow-card:       0 4px 12px rgba(0, 0, 0, 0.10);
  --shadow-card-soft:  0 2px 8px rgba(92, 64, 60, 0.08);
  --shadow-float:      0 10px 28px rgba(92, 64, 60, 0.14);

  /* ---------- Radii ---------- */
  --radius-sm:         6px;
  --radius-md:         10px;
  --radius-card:       15px;   /* per MIV */
  --radius-lg:         24px;
  --radius-pill:       50px;   /* per MIV — buttons */

  /* ---------- Spacing (base 8) ---------- */
  --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;

  /* ---------- Type Families ---------- */
  --font-serif:   'Lora', 'Bree Serif', Georgia, serif;
  --font-accent:  'Bree', 'Bree Serif', 'Segoe UI', sans-serif;
  --font-mono:    ui-monospace, 'JetBrains Mono', Menlo, monospace;

  /* ---------- Type Scale ---------- */
  --fs-display: 64px;
  --fs-h1:      44px;
  --fs-h2:      34px;
  --fs-h3:      26px;
  --fs-h4:      20px;
  --fs-lead:    20px;
  --fs-body:    16px;
  --fs-small:   14px;
  --fs-caption: 12px;

  --lh-tight:   1.1;
  --lh-snug:    1.25;
  --lh-normal:  1.5;
  --lh-loose:   1.7;

  --tracking-tight:   -0.01em;
  --tracking-normal:  0;
  --tracking-wide:    0.08em;
  --tracking-widest:  0.22em; /* used in MIV "M A R K E T I N G" tagline */

  /* ---------- Motion ---------- */
  --ease-out-soft: cubic-bezier(.22,.61,.36,1);
  --dur-fast:   140ms;
  --dur-med:    240ms;
  --dur-slow:   420ms;
}

/* ---------- Element-level semantic styles ---------- */

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

h1, .h1 {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: var(--fs-h1);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
  margin: 0 0 var(--space-4);
}

h2, .h2 {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: var(--fs-h2);
  line-height: var(--lh-snug);
  color: var(--fg-1);
  margin: 0 0 var(--space-4);
}

h3, .h3 {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: var(--fs-h3);
  line-height: var(--lh-snug);
  color: var(--fg-1);
  margin: 0 0 var(--space-3);
}

h4, .h4 {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: var(--fs-h4);
  line-height: var(--lh-snug);
  color: var(--fg-1);
  margin: 0 0 var(--space-2);
}

.display {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: var(--fs-display);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
}

.accent {
  font-family: var(--font-accent);
  font-weight: 400;
  font-style: italic;
}

.eyebrow {
  font-family: var(--font-accent);
  font-weight: 700;
  font-size: var(--fs-caption);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--fg-3);
}

p, .p {
  font-family: var(--font-serif);
  font-size: var(--fs-body);
  line-height: var(--lh-loose);
  color: var(--fg-1);
  margin: 0 0 var(--space-4);
  text-wrap: pretty;
}

.lead {
  font-size: var(--fs-lead);
  line-height: var(--lh-loose);
  color: var(--fg-2);
}

small, .small, .caption {
  font-size: var(--fs-small);
  color: var(--fg-2);
}

code, pre, .mono {
  font-family: var(--font-mono);
  font-size: 0.92em;
}

a {
  color: var(--egg-terracotta);
  text-underline-offset: 3px;
  transition: color var(--dur-fast) var(--ease-out-soft);
}
a:hover { color: var(--egg-brown); }

hr {
  border: 0;
  border-top: 1px solid var(--border-soft);
  margin: var(--space-6) 0;
}