/* ──────────────────────────────────────────────────────────────
   Gustavo Eustáquio — Design System
   Foundational tokens: color + type
   ────────────────────────────────────────────────────────────── */

/* Fonts ────────────────────────────────────────────────────── */

@font-face {
  font-family: "Gunterz";
  src: url("fonts/Gunterz-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Gunterz";
  src: url("fonts/Gunterz-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Gunterz";
  src: url("fonts/Gunterz-Bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* Secondary face for long-form body copy — see README.
   Loaded via Google Fonts in HTML: Inter (humanist sans) */

:root {
  /* ── Brand palette ──────────────────────────────────────────
     Built from the brief's terroso/orgânico direction + the
     prototype's verde-profundo + bege quente.
     Hex values are educated approximations of Cores.pdf —
     PLEASE verify against the source file. */

  /* Primary — Verde Profundo (logo color) */
  --ge-verde-900: #08382B;   /* densest, near-black green */
  --ge-verde-800: #0E5C46;   /* PRIMARY — the broto / logo */
  --ge-verde-700: #1E7456;
  --ge-verde-600: #3F8A6E;
  --ge-verde-300: #A8C2B4;
  --ge-verde-100: #DDE7DF;

  /* Verde Musgo (deep, dusty) */
  --ge-musgo-700: #3D4F38;
  --ge-musgo-500: #5D6E4A;
  --ge-musgo-300: #9BA888;

  /* Verde Oliva (warm, dry) */
  --ge-oliva-700: #6A6D38;
  --ge-oliva-500: #8A8B4B;
  --ge-oliva-300: #C4C39A;

  /* Bege — the warm-paper backbone */
  --ge-bege-700: #B79E6B;    /* darker sand for accents */
  --ge-bege-500: #DBCBA0;    /* hero background tone */
  --ge-bege-400: #E2D4AF;
  --ge-bege-300: #E8DDC4;    /* areia clara */
  --ge-bege-200: #F0E8D2;
  --ge-bege-100: #F5F1E8;    /* off-white */
  --ge-bege-50:  #FAF6EC;    /* paper / cream */

  /* Terra — terroso elegante */
  --ge-terra-700: #5C3E26;   /* deep earth */
  --ge-terra-500: #8B6A4A;   /* warm brown */
  --ge-terra-300: #BFA489;

  /* Neutros — preto suave + cinzas mornos */
  --ge-tinta-900: #1A1916;   /* PRIMARY ink — soft black, never #000 */
  --ge-tinta-700: #3A3833;
  --ge-tinta-500: #6B6860;
  --ge-tinta-300: #B5B0A4;
  --ge-tinta-100: #E8E3D6;
  --ge-tinta-50:  #F2EDDF;

  /* Pure */
  --ge-paper:    #FFFFFF;
  --ge-shadow:   rgba(26, 25, 22, 0.12);
  --ge-shadow-soft: rgba(26, 25, 22, 0.06);

  /* ── Semantic ──────────────────────────────────────────── */

  --bg:           var(--ge-bege-100);       /* page background — warm off-white */
  --bg-alt:       var(--ge-bege-50);
  --bg-warm:      var(--ge-bege-500);       /* hero / brand surfaces */
  --bg-deep:      var(--ge-verde-800);      /* inverted blocks */
  --bg-ink:       var(--ge-tinta-900);

  --fg:           var(--ge-tinta-900);
  --fg-muted:     var(--ge-tinta-500);
  --fg-subtle:    var(--ge-tinta-300);
  --fg-on-deep:   var(--ge-bege-100);       /* text on deep green/ink */
  --fg-on-warm:   var(--ge-verde-800);      /* text on beige */
  --fg-accent:    var(--ge-verde-800);

  --line:         var(--ge-tinta-100);
  --line-strong:  var(--ge-tinta-300);
  --line-on-warm: rgba(14, 92, 70, 0.18);

  --accent:       var(--ge-verde-800);
  --accent-warm:  var(--ge-terra-500);

  /* ── Type stack ────────────────────────────────────────── */
  --font-display: "Gunterz", "Inter", system-ui, sans-serif;   /* H1–H4, marks */
  --font-body:    "Inter", "Public Sans", system-ui, sans-serif; /* long-form */
  --font-mono:    "JetBrains Mono", ui-monospace, monospace;

  /* ── Scale ──────────────────────────────────────────────
     A modular display scale leaning EDITORIAL — big jumps. */
  --fs-display-2xl: clamp(64px, 9vw, 132px);
  --fs-display-xl:  clamp(48px, 6.5vw, 92px);
  --fs-display-lg:  clamp(40px, 5vw, 68px);
  --fs-h1:          clamp(34px, 4vw, 52px);
  --fs-h2:          clamp(26px, 3vw, 38px);
  --fs-h3:          22px;
  --fs-h4:          18px;
  --fs-body-lg:     19px;
  --fs-body:        16px;
  --fs-body-sm:     14px;
  --fs-caption:     12px;
  --fs-eyebrow:     11px;     /* uppercase, tracked */

  /* ── Spacing / rhythm ──────────────────────────────────── */
  --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 ─────────────────────────────────────────────── */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-xl: 32px;
  --radius-pill: 999px;
  --radius-organic: 22px 28px 18px 30px;  /* asymmetric, leaf-like */

  /* ── Elevation — soft, paper-light ─────────────────────── */
  --shadow-1: 0 1px 2px rgba(26,25,22,.04), 0 1px 0 rgba(26,25,22,.04);
  --shadow-2: 0 4px 14px rgba(26,25,22,.06), 0 1px 2px rgba(26,25,22,.04);
  --shadow-3: 0 18px 40px -12px rgba(26,25,22,.14), 0 4px 10px rgba(26,25,22,.05);
  --shadow-deep: 0 30px 60px -20px rgba(8,56,43,.32);

  /* ── Motion ────────────────────────────────────────────── */
  --ease-organic: cubic-bezier(.22, .68, .12, 1);     /* default — soft settle */
  --ease-grow:    cubic-bezier(.16, .84, .25, 1);     /* plant unfurl */
  --dur-fast:   180ms;
  --dur-base:   320ms;
  --dur-slow:   620ms;
}

/* ── Base elements ────────────────────────────────────────── */

html, body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  color: var(--fg);
  letter-spacing: -0.02em;
  line-height: 1.05;
  margin: 0;
  text-wrap: balance;
}

h1 { font-size: var(--fs-h1); font-weight: 500; letter-spacing: -0.03em; }
h2 { font-size: var(--fs-h2); font-weight: 500; letter-spacing: -0.025em; }
h3 { font-size: var(--fs-h3); font-weight: 500; line-height: 1.2; }
h4 { font-size: var(--fs-h4); font-weight: 500; line-height: 1.25; }

p {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--fg);
  text-wrap: pretty;
}

small { font-size: var(--fs-body-sm); color: var(--fg-muted); }

a {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  transition: opacity var(--dur-fast) var(--ease-organic);
}
a:hover { opacity: 0.7; }

button {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: -0.005em;
}

::selection {
  background: var(--ge-verde-800);
  color: var(--ge-bege-100);
}

/* Utility — eyebrow / kicker label */
.eyebrow {
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--fg-muted);
}

/* Display headlines — opt-in size */
.display-2xl { font-family: var(--font-display); font-weight: 500; font-size: var(--fs-display-2xl); line-height: 0.92; letter-spacing: -0.04em; }
.display-xl  { font-family: var(--font-display); font-weight: 500; font-size: var(--fs-display-xl);  line-height: 0.95; letter-spacing: -0.035em; }
.display-lg  { font-family: var(--font-display); font-weight: 500; font-size: var(--fs-display-lg);  line-height: 1.00; letter-spacing: -0.03em; }