:root {
  /* ==========================================================================
     ZGEN MARKETING — Color tokens
     From manual-ZGEN-2021.pdf, "CORES" page.
     ========================================================================== */

  /* Brand primary */
  --zg-navy:       #3E435B;   /* C79 M68 Y40 K34 — R62 G67 B91 */
  --zg-mint:       #00E8BE;   /* C62 M0 Y41 K0  — R0 G232 B190 */

  /* Derived navy scale (tint/shade of #3E435B) */
  --zg-navy-900:   #10121B;   /* deep shade for backgrounds */
  --zg-navy-800:   #1B1F2C;
  --zg-navy-700:   #2A2F42;
  --zg-navy-600:   #3E435B;   /* = brand navy */
  --zg-navy-500:   #5A607A;
  --zg-navy-400:   #838AA2;
  --zg-navy-300:   #ABB0C2;
  --zg-navy-200:   #D0D3DE;
  --zg-navy-100:   #EAECF2;
  --zg-navy-050:   #F5F6F9;

  /* Derived mint scale */
  --zg-mint-700:   #00A082;
  --zg-mint-600:   #00C8A4;
  --zg-mint-500:   #00E8BE;   /* = brand mint */
  --zg-mint-400:   #3DEFCC;
  --zg-mint-300:   #7BF4DB;
  --zg-mint-200:   #BAF9EC;
  --zg-mint-100:   #E3FDF7;

  /* Neutrals (monochrome usage from manual — K20 / K80) */
  --zg-white:      #FFFFFF;
  --zg-gray-light: #CCCCCC;   /* K20 */
  --zg-gray-dark:  #333333;   /* K80 */
  --zg-black:      #000000;

  /* Semantic */
  --zg-fg-1:       var(--zg-navy-600);      /* primary text */
  --zg-fg-2:       var(--zg-navy-500);      /* secondary text */
  --zg-fg-3:       var(--zg-navy-400);      /* muted */
  --zg-fg-on-dark: #FFFFFF;
  --zg-fg-on-mint: var(--zg-navy-600);

  --zg-bg:         #FFFFFF;
  --zg-bg-alt:     var(--zg-navy-050);
  --zg-bg-dark:    var(--zg-navy-600);
  --zg-bg-deep:    var(--zg-navy-900);

  --zg-accent:     var(--zg-mint-500);
  --zg-accent-hi:  var(--zg-mint-400);
  --zg-accent-lo:  var(--zg-mint-700);

  --zg-border:     var(--zg-navy-200);
  --zg-border-strong: var(--zg-navy-300);

  --zg-success:    #00C8A4;
  --zg-warn:       #F5A524;
  --zg-danger:     #E5484D;

  /* Signature gradient — from page 15 "ELEMENTOS" (linhas e degrades) */
  --zg-grad-brand: linear-gradient(135deg, var(--zg-navy-600) 0%, var(--zg-mint-500) 100%);
  --zg-grad-soft:  linear-gradient(135deg, var(--zg-navy-700) 0%, var(--zg-mint-600) 140%);
  --zg-grad-dawn:  linear-gradient(180deg, var(--zg-navy-600) 0%, var(--zg-mint-500) 120%);

  /* ==========================================================================
     Typography — Raleway family (Bold for titles, Medium/Regular for body)
     ========================================================================== */
  --zg-font-sans: 'Raleway', 'Helvetica Neue', Arial, sans-serif;
  --zg-font-display: 'Raleway', 'Helvetica Neue', Arial, sans-serif;
  --zg-font-mono: 'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace;

  --zg-weight-regular: 400;
  --zg-weight-medium:  500;
  --zg-weight-semi:    600;
  --zg-weight-bold:    700;
  --zg-weight-black:   800;

  /* Type scale (1.25 major third) */
  --zg-text-xs:   12px;
  --zg-text-sm:   14px;
  --zg-text-md:   16px;
  --zg-text-lg:   18px;
  --zg-text-xl:   22px;
  --zg-text-2xl:  28px;
  --zg-text-3xl:  36px;
  --zg-text-4xl:  48px;
  --zg-text-5xl:  64px;
  --zg-text-6xl:  84px;

  --zg-leading-tight:   1.12;
  --zg-leading-snug:    1.25;
  --zg-leading-normal:  1.5;
  --zg-leading-loose:   1.7;

  --zg-tracking-tight:  -0.01em;
  --zg-tracking-normal: 0;
  --zg-tracking-wide:   0.04em;
  --zg-tracking-wider:  0.12em;   /* eyebrow / all-caps labels */
  --zg-tracking-widest: 0.24em;   /* badge / circular wordmark */

  /* ==========================================================================
     Spacing / radii / shadow / motion
     ========================================================================== */
  --zg-space-1: 4px;
  --zg-space-2: 8px;
  --zg-space-3: 12px;
  --zg-space-4: 16px;
  --zg-space-5: 24px;
  --zg-space-6: 32px;
  --zg-space-7: 48px;
  --zg-space-8: 64px;
  --zg-space-9: 96px;
  --zg-space-10: 128px;

  --zg-radius-sm:   4px;
  --zg-radius-md:   8px;
  --zg-radius-lg:   14px;
  --zg-radius-xl:   22px;
  --zg-radius-pill: 999px;

  --zg-shadow-xs:  0 1px 2px rgba(16,18,27,0.06);
  --zg-shadow-sm:  0 2px 6px rgba(16,18,27,0.08);
  --zg-shadow-md:  0 8px 24px rgba(16,18,27,0.10);
  --zg-shadow-lg:  0 20px 48px rgba(16,18,27,0.14);
  --zg-shadow-mint: 0 12px 40px rgba(0,232,190,0.28);

  --zg-ease:       cubic-bezier(.2,.7,.2,1);
  --zg-ease-out:   cubic-bezier(.16,1,.3,1);
  --zg-dur-fast:   140ms;
  --zg-dur-norm:   240ms;
  --zg-dur-slow:   420ms;
}

/* ==========================================================================
   Semantic element styles — base reset + typography
   ========================================================================== */

html, body {
  font-family: var(--zg-font-sans);
  color: var(--zg-fg-1);
  background: var(--zg-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.zg-eyebrow {
  font-size: var(--zg-text-xs);
  font-weight: var(--zg-weight-semi);
  letter-spacing: var(--zg-tracking-wider);
  text-transform: uppercase;
  color: var(--zg-fg-2);
}

.zg-h1, h1.zg {
  font-family: var(--zg-font-display);
  font-weight: var(--zg-weight-black);
  font-size: clamp(44px, 6vw, var(--zg-text-6xl));
  line-height: var(--zg-leading-tight);
  letter-spacing: var(--zg-tracking-tight);
  color: var(--zg-fg-1);
  text-wrap: balance;
}
.zg-h2, h2.zg {
  font-family: var(--zg-font-display);
  font-weight: var(--zg-weight-bold);
  font-size: var(--zg-text-4xl);
  line-height: var(--zg-leading-tight);
  letter-spacing: var(--zg-tracking-tight);
  color: var(--zg-fg-1);
}
.zg-h3, h3.zg {
  font-family: var(--zg-font-display);
  font-weight: var(--zg-weight-bold);
  font-size: var(--zg-text-2xl);
  line-height: var(--zg-leading-snug);
  color: var(--zg-fg-1);
}
.zg-h4, h4.zg {
  font-family: var(--zg-font-display);
  font-weight: var(--zg-weight-semi);
  font-size: var(--zg-text-xl);
  line-height: var(--zg-leading-snug);
  color: var(--zg-fg-1);
}
.zg-body, p.zg {
  font-size: var(--zg-text-md);
  font-weight: var(--zg-weight-regular);
  line-height: var(--zg-leading-normal);
  color: var(--zg-fg-1);
  text-wrap: pretty;
}
.zg-body-lg {
  font-size: var(--zg-text-lg);
  line-height: var(--zg-leading-normal);
  color: var(--zg-fg-1);
}
.zg-caption {
  font-size: var(--zg-text-sm);
  color: var(--zg-fg-2);
}

/* Accent helpers */
.zg-accent-text { color: var(--zg-accent); }
.zg-on-dark { color: var(--zg-fg-on-dark); }
.zg-grad-text {
  background: var(--zg-grad-brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}