/* Envolve tokens */
/* Envolve — Color tokens
   Source: Figma "Design System / Cores" frame.
   Brand DNA: warm gold primary + dark-gray neutrals on white.
   Gold is reserved for actions, highlights and accents — neutrals carry the page. */

:root {
  /* ---- Primary: Gold (Cor primária) ---- */
  --gold-50:  #FCF9EC;
  --gold-100: #F8F2D7;
  --gold-200: #F1E6AE;
  --gold-300: #E9D77F;
  --gold-400: #E2C84F;
  --gold-500: #DEB925; /* base brand gold rgb(222,185,37) */
  --gold-600: #C7A41C;
  --gold-700: #A88A14;
  --gold-800: #816A10;

  /* ---- Neutrals (Preto + grays) ---- */
  --white:    #FFFFFF;
  --gray-50:  #FAFAFA;
  --gray-100: #F6F6F6; /* page / section fundo */
  --gray-150: #F4F4F4;
  --gray-200: #ECECEC; /* bordas e divisões */
  --gray-300: #D9D9D9; /* borda forte */
  --gray-400: #B8B8B8; /* itens inativos */
  --gray-500: #8A8A8A; /* textos secundários */
  --gray-600: #585454; /* wordmark gray */
  --gray-700: #464646; /* corpo de texto */
  --gray-800: #383739;
  --gray-900: #242424; /* preto 100% — títulos */

  /* ---- Support / illustration accents (use sparingly) ---- */
  --purple-100: #E5E1EE;
  --purple-300: #A99FC4;
  --purple-500: #564787; /* cor secundária */
  --navy-300:   #8A93A8;
  --navy-500:   #3A4358;
  --navy-900:   #101935; /* cor terceira */

  /* ---- Semantic ---- */
  --color-error:        #F83939;
  --color-error-bg:     #FDECEC;
  --color-success:      #1F9D63;
  --color-success-bg:   #E7F4EE;

  /* ---- Semantic aliases ---- */
  --color-primary:        var(--gold-500);
  --color-primary-hover:  var(--gold-600);
  --color-primary-active: var(--gold-700);
  --color-primary-soft:   var(--gold-100);

  /* Default to dark text on gold for accessibility/maturity.
     Brand also permits 85% white on gold for large display CTAs (--text-on-primary-alt). */
  --text-on-primary:     var(--gray-900);
  --text-on-primary-alt: rgba(255,255,255,0.92);

  --text-heading:   var(--gray-900);
  --text-body:      var(--gray-700);
  --text-secondary: var(--gray-500);
  --text-disabled:  var(--gray-400);
  --text-on-dark:   var(--white);
  --text-link:      var(--gold-700);

  --surface-page:   var(--white);
  --surface-subtle: var(--gray-100);
  --surface-card:   var(--white);
  --surface-dark:   var(--gray-900);
  --surface-inverse:var(--gray-900);

  --border-subtle:  var(--gray-200);
  --border-strong:  var(--gray-300);
  --focus-ring:     rgba(222,185,37,0.45);
}
/* Envolve — Typography tokens
   Source: Figma "Design System / Tipografia" frame.
   Primary family: Red Hat Display. Montserrat for doc/UI labels.
   Scale (desktop): H1 40 Medium · H2 32 Bold · H3 26 Bold · H4 20 Bold ·
   H5 20 Regular · Texto grande 16 · Texto corrido 14 · Legenda 12 · 10 menor.
   Line-height baseline 140%. */

:root {
  /* Families */
  --font-display: "Red Hat Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-body:    "Red Hat Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-ui:      "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* Weights */
  --weight-light:    300;
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  /* Font sizes */
  --fs-h1:    40px;
  --fs-h2:    32px;
  --fs-h3:    26px;
  --fs-h4:    20px;
  --fs-h5:    20px;
  --fs-lg:    18px;
  --fs-base:  16px;
  --fs-body:  14px;
  --fs-sm:    14px;
  --fs-xs:    12px;
  --fs-2xs:   10px;
  /* Oversized display for hero moments */
  --fs-display: 64px;

  /* Line heights */
  --lh-tight:   1.2;  /* @kind other */
  --lh-heading: 1.3;  /* @kind other */
  --lh-base:    1.4;  /* @kind other */
  --lh-relaxed: 1.6;  /* @kind other */

  /* Letter spacing */
  --tracking-tight:  -0.02em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;  /* uppercase eyebrows / button labels */
}

/* Optional helper classes (consumers may use tokens directly instead) */
.envolve-h1 { font-family: var(--font-display); font-size: var(--fs-h1); font-weight: var(--weight-medium); line-height: var(--lh-base); letter-spacing: var(--tracking-tight); color: var(--text-heading); }
.envolve-h2 { font-family: var(--font-display); font-size: var(--fs-h2); font-weight: var(--weight-bold); line-height: var(--lh-heading); letter-spacing: var(--tracking-tight); color: var(--text-heading); }
.envolve-h3 { font-family: var(--font-display); font-size: var(--fs-h3); font-weight: var(--weight-bold); line-height: var(--lh-base); color: var(--text-heading); }
.envolve-h4 { font-family: var(--font-display); font-size: var(--fs-h4); font-weight: var(--weight-bold); line-height: var(--lh-base); color: var(--text-heading); }
.envolve-body { font-family: var(--font-body); font-size: var(--fs-base); font-weight: var(--weight-regular); line-height: var(--lh-relaxed); color: var(--text-body); }
.envolve-eyebrow { font-family: var(--font-display); font-size: var(--fs-xs); font-weight: var(--weight-bold); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--text-link); }
/* Envolve — Spacing, radii, elevation
   Spacing source: Figma local components 8/16/24/32/40/56/72.
   Elevation source: "Elementos / Elevação" (Botão→Modal). */

:root {
  /* Spacing scale */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  16px;
  --space-4:  24px;
  --space-5:  32px;
  --space-6:  40px;
  --space-7:  56px;
  --space-8:  72px;
  --space-9:  96px;
  --space-10: 128px;

  /* Layout */
  --container-max: 1240px;
  --section-pad-y: 96px;
  --page-gutter-x: 32px;

  /* Radii */
  --radius-xs:   6px;
  --radius-sm:   8px;
  --radius-md:   12px; /* cards, inputs, swatches */
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-pill: 999px;

  /* Elevation (Z-axis) */
  --elev-1: 0 1px 2px 0 rgba(0,0,0,0.16);   /* botão */
  --elev-2: 0 8px 16px 0 rgba(0,0,0,0.16);  /* menu */
  --elev-3: 0 12px 24px 0 rgba(0,0,0,0.16); /* card elevado */
  --elev-4: 0 16px 32px 0 rgba(0,0,0,0.16); /* picker */
  --elev-5: 0 24px 48px 0 rgba(0,0,0,0.20); /* modal */

  /* Soft resting shadow for default cards on light backgrounds */
  --shadow-card: 0 2px 8px 0 rgba(36,36,36,0.06), 0 1px 2px 0 rgba(36,36,36,0.04);
  --shadow-cta:  0 12px 28px -8px rgba(222,185,37,0.45);

  /* Motion */
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);   /* @kind other */
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1); /* @kind other */
  --dur-fast:   140ms; /* @kind other */
  --dur-base:   220ms; /* @kind other */
  --dur-slow:   360ms; /* @kind other */
}
/* Envolve — base element defaults & utility primitives.
   Light, non-intrusive resets so specimens and kits look on-brand by default. */

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

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

h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  color: var(--text-heading);
  margin: 0;
  text-wrap: balance;
}
h1 { font-size: var(--fs-h1); font-weight: var(--weight-medium); line-height: var(--lh-base); letter-spacing: var(--tracking-tight); }
h2 { font-size: var(--fs-h2); font-weight: var(--weight-bold); line-height: var(--lh-heading); letter-spacing: var(--tracking-tight); }
h3 { font-size: var(--fs-h3); font-weight: var(--weight-bold); line-height: var(--lh-base); }
h4 { font-size: var(--fs-h4); font-weight: var(--weight-bold); line-height: var(--lh-base); }
h5 { font-size: var(--fs-h5); font-weight: var(--weight-regular); line-height: var(--lh-base); }

p { margin: 0; text-wrap: pretty; }

a { color: var(--text-link); text-decoration: none; transition: color var(--dur-fast) var(--ease-standard); }
a:hover { color: var(--gold-800); }

:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }

/* Eyebrow / kicker label */
.eyebrow {
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-link);
}

@media (max-width: 980px) {
  :root { --page-gutter-x: 20px; }
}