/* ============================================================
   Cícero Junqueira · Constelação Sistêmica
   Foundations — Color + Type
   ------------------------------------------------------------
   Fonts load from Google Fonts (both are free):
   Cormorant Garamond (serif, titles/quotes) + Jost (sans, UI/body)
   ============================================================ */

/* Self-hosted brand fonts (uploaded by the client).
   Paths are relative to this CSS file at project root → fonts/ */
@font-face {
  font-family: 'Cormorant Garamond';
  src: url('fonts/CormorantGaramond-Regular.ttf') format('truetype');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Cormorant Garamond';
  src: url('fonts/CormorantGaramond-Italic.ttf') format('truetype');
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Cormorant Garamond';
  src: url('fonts/CormorantGaramond-SemiBold.ttf') format('truetype');
  font-weight: 600; font-style: normal; font-display: swap;
}
/* Variable face — covers the remaining weights (500/700) */
@font-face {
  font-family: 'Cormorant Garamond';
  src: url('fonts/CormorantGaramond.ttf') format('truetype');
  font-weight: 300 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Jost';
  src: url('fonts/Jost-Light.ttf') format('truetype');
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Jost';
  src: url('fonts/Jost-Regular.ttf') format('truetype');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Jost';
  src: url('fonts/Jost-Medium.ttf') format('truetype');
  font-weight: 500; font-style: normal; font-display: swap;
}
/* Variable face — covers remaining weights (600) */
@font-face {
  font-family: 'Jost';
  src: url('fonts/Jost.ttf') format('truetype');
  font-weight: 300 600; font-style: normal; font-display: swap;
}

:root {
  /* ---- Brand palette (source of truth) ----------------- */
  --verde-floresta: #13271B;   /* primary — dark grounds, hero, nav, body text on light */
  --verde-folha:    #94CD92;   /* leaf green — labels, icons, highlights, dividers */
  --dourado:        #D4A017;   /* gold accent — ONE element per piece (CTA / line / icon) */
  --dourado-suave:  #CDC484;   /* soft gold alt — filigree linework, subtle accents on dark */
  --palha:          #F2EFE3;   /* cream/straw — DEFAULT light background. NEVER pure white. */
  --preto:          #010101;   /* deep black — max-contrast body text */
  --marfim:         #FAFAF6;   /* ivory — light text on dark grounds, soft white */

  /* ---- Extended tints (derived, for UI surfaces) -------- */
  --verde-900:      #0D1C13;   /* deeper than floresta — footers, shadows */
  --verde-700:      #1B3A2D;   /* mid green — cards/sections on dark, hovers */
  --verde-500:      #2F5240;   /* muted green — secondary surfaces */
  --palha-escuro:   #E6E1D1;   /* cream tint — borders, hairlines on cream */
  --palha-card:     #FBFAF4;   /* warm off-white — cards on cream (still not pure white) */

  /* ---- Semantic foreground / background ----------------- */
  --bg:             var(--palha);
  --bg-dark:        var(--verde-floresta);
  --surface:        var(--palha-card);
  --surface-dark:   var(--verde-700);
  --fg1:            var(--verde-floresta);   /* primary text on light */
  --fg2:            #41513F;                  /* secondary text on light (warm green-gray) */
  --fg3:            #7A8478;                  /* tertiary / captions */
  --fg-on-dark:     var(--marfim);            /* primary text on dark */
  --fg-on-dark-2:   rgba(250,250,246,0.66);   /* secondary text on dark */
  --border:         var(--palha-escuro);
  --border-dark:    rgba(250,250,246,0.14);
  --accent:         var(--dourado);
  --accent-soft:    var(--dourado-suave);
  --leaf:           var(--verde-folha);

  /* ---- Type families ----------------------------------- */
  --font-serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --font-sans:  'Jost', system-ui, -apple-system, sans-serif;

  /* ---- Type scale (fluid-friendly base values) --------- */
  --text-display: 64px;  /* hero serif */
  --text-h1:      44px;
  --text-h2:      32px;
  --text-h3:      24px;
  --text-quote:   26px;  /* italic serif pull-quote */
  --text-lead:    20px;
  --text-body:    17px;
  --text-small:   15px;
  --text-label:   12px;  /* uppercase, tracked */

  --leading-tight: 1.15;
  --leading-snug:  1.35;
  --leading-body:  1.7;

  --track-label: 0.2em;   /* labels / tags */
  --track-cta:   0.15em;  /* buttons */
  --track-wide:  0.05em;

  /* ---- Radii / spacing / elevation --------------------- */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 16px;
  --r-pill: 999px;

  --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;

  /* Soft, low-contrast elevation only — never heavy shadows */
  --shadow-sm: 0 1px 3px rgba(19,39,27,0.06);
  --shadow-md: 0 4px 20px rgba(19,39,27,0.08);
  --shadow-lg: 0 12px 40px rgba(19,39,27,0.12);

  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --dur:  0.25s;
}

/* ============================================================
   Base semantic type — apply via classes or element selectors
   ============================================================ */

.serif { font-family: var(--font-serif); }
.sans  { font-family: var(--font-sans); }

.display {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: var(--text-display);
  line-height: var(--leading-tight);
  letter-spacing: 0.01em;
  color: var(--fg1);
}
.h1 {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: var(--text-h1);
  line-height: var(--leading-tight);
  color: var(--fg1);
}
.h2 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-style: italic;
  font-size: var(--text-h2);
  line-height: var(--leading-snug);
  color: var(--fg1);
}
.h3 {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: var(--text-h3);
  line-height: var(--leading-snug);
  color: var(--fg1);
}
.quote {
  font-family: var(--font-serif);
  font-weight: 400;
  font-style: italic;
  font-size: var(--text-quote);
  line-height: var(--leading-snug);
  color: var(--fg1);
}
.lead {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: var(--text-lead);
  line-height: var(--leading-body);
  color: var(--fg2);
}
.body {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--text-body);
  line-height: var(--leading-body);
  color: var(--fg2);
}
.small {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--text-small);
  line-height: var(--leading-snug);
  color: var(--fg3);
}
.label {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--text-label);
  text-transform: uppercase;
  letter-spacing: var(--track-label);
  color: var(--leaf);
}
.cta-text {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: var(--track-cta);
}

/* Gold hairline divider — a signature brand element */
.rule-gold {
  width: 60px;
  height: 1px;
  background: var(--dourado);
  border: 0;
}