/* ============================================================
   HIPERMETAS DESIGN TOKENS — v1.0
   Canonical CSS variables. Import this in any asset.
   Based on source/design-system-v1.md §3–§8, §11.
   ============================================================ */

/* fonts.css migrado pro HTML head (async load) pra eliminar render-blocking waterfall */

:root {
  /* --------------------------------------------------------
     GLOBAL TOKENS (raw HEX, brand-agnostic)
     -------------------------------------------------------- */
  --color-verde-tundra-900: #173C3B;
  --color-verde-musgo-700:  #21524B;
  --color-verde-carvao-950: #0B1F1E;
  --color-verde-folha-900:  #0B3402;
  --color-verde-menta-300:  #A4C3C0;
  --color-bege-antigo-50:   #EDE4D2;

  /* --------------------------------------------------------
     ALIAS TOKENS (semantic)
     -------------------------------------------------------- */
  /* Backgrounds */
  --bg-primary-dark:     var(--color-verde-tundra-900);   /* authority, hook */
  --bg-secondary-dark:   var(--color-verde-musgo-700);    /* warm mid */
  --bg-deepest:          var(--color-verde-carvao-950);   /* max weight */
  --bg-primary-light:    var(--color-bege-antigo-50);     /* breathing */
  --bg-accent-light:     var(--color-verde-menta-300);    /* respiration */

  /* Text */
  --text-on-dark:            var(--color-bege-antigo-50);
  --text-on-light:           var(--color-verde-carvao-950);
  --text-on-light-secondary: var(--color-verde-tundra-900);
  --text-accent-saturated:   var(--color-verde-folha-900);
  --text-muted-on-dark:      var(--color-verde-menta-300);

  /* Action / brand */
  --accent-action: var(--color-verde-folha-900);   /* CTA */
  --accent-brand:  var(--color-verde-tundra-900);  /* badge, seal */

  /* MSH hierarchy — 100% intra-verde, never invert order */
  --msh-meta:  var(--color-verde-carvao-950);   /* Meta Base  — sobrevivência */
  --msh-super: var(--color-verde-menta-300);    /* Super Meta — +10% */
  --msh-hiper: var(--color-verde-folha-900);    /* Hiper Meta — +15% */

  /* --------------------------------------------------------
     TYPOGRAPHY
     -------------------------------------------------------- */
  /* Display stack: Helvetica Neue primário (macOS/iOS system), Inter variable fallback. */
  --font-display: 'Helvetica Neue', 'HelveticaNeue', 'Helvetica', 'Inter', -apple-system, BlinkMacSystemFont, Arial, sans-serif;
  --font-sans:    'Inter', 'Helvetica Neue', -apple-system, BlinkMacSystemFont, Arial, sans-serif;
  --font-italic:  'Helvetica Neue', 'Inter', Arial, sans-serif;
  --font-numeric: 'Helvetica Neue', 'Inter', Arial, sans-serif; /* Anton removido (não usado) */
  /* Alias compat (legacy names still used in DS previews) */
  --font-serif:   var(--font-display);

  /* Font sizes — carousel base 1080×1350 (scale down for web) */
  --fs-display-xl:      120px;   /* hook card 1 */
  --fs-display-l:       88px;    /* card 2+ continuation */
  --fs-display-numeric: 200px;   /* 300%, R$420K */
  --fs-h1:              72px;
  --fs-h2:              56px;
  --fs-h3:              40px;
  --fs-body-l:          40px;
  --fs-body-m:          28px;
  --fs-body-s:          24px;
  --fs-quote:           48px;
  --fs-cta:             72px;
  --fs-button:          20px;
  --fs-badge:           22px;

  /* Font weights */
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
  --fw-heavy:    800;

  /* Line heights */
  --lh-tight:  0.95;
  --lh-snug:   1.1;
  --lh-normal: 1.35;
  --lh-loose:  1.5;

  /* Tracking */
  --tk-tight:  -0.02em;
  --tk-normal: 0;
  --tk-wide:   0.05em;
  --tk-wider:  0.08em;

  /* Fluid web clamps — use on LP */
  --fs-hero-web:    clamp(48px, 6vw, 88px);
  --fs-h2-web:      clamp(32px, 4vw, 56px);
  --fs-h3-web:      clamp(24px, 2.5vw, 40px);
  --fs-body-web:    clamp(16px, 1.1vw, 20px);
  --fs-caption-web: clamp(14px, 0.9vw, 16px);

  /* --------------------------------------------------------
     SPACING — 8pt baseline
     -------------------------------------------------------- */
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 32px;
  --space-6: 48px;
  --space-7: 64px;
  --space-8: 80px;
  --space-9: 120px;

  /* --------------------------------------------------------
     BORDERS & RADIUS (editorial, discreet)
     -------------------------------------------------------- */
  --bw-hairline: 1px;
  --bw-thin:     2px;
  --bw-medium:   3px;
  --bw-emphasis: 4px;

  --radius-0:    0;
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   16px;
  --radius-full: 999px;

  /* --------------------------------------------------------
     SHADOWS — minimal editorial, tinted with verde-carvão
     -------------------------------------------------------- */
  --shadow-none:   none;
  --shadow-subtle: 0 2px 8px  rgba(11, 31, 30, 0.08);
  --shadow-medium: 0 4px 16px rgba(11, 31, 30, 0.12);
  --shadow-logo:   0 2px 8px  rgba(11, 31, 30, 0.25);  /* logo over photo */

  /* Shadow scale tokenizada — Hipermetas (tinted verde-carvão) */
  --shadow-sm:    0 2px 6px  rgba(11, 31, 30, 0.06);
  --shadow-md:    0 8px 20px rgba(11, 31, 30, 0.10);
  --shadow-lg:    0 16px 40px rgba(11, 31, 30, 0.14);
  --shadow-xl:    0 24px 60px rgba(11, 31, 30, 0.22);
  --shadow-inset: 0 1px 0 rgba(255, 255, 255, 0.8) inset;

  /* --------------------------------------------------------
     BREAKPOINTS
     -------------------------------------------------------- */
  --bp-mobile:  390px;
  --bp-tablet:  768px;
  --bp-desktop: 1024px;
  --bp-wide:    1280px;

  /* --------------------------------------------------------
     MOTION
     -------------------------------------------------------- */
  --motion-fast:   150ms;
  --motion-normal: 200ms;
  --motion-slow:   400ms;
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
}

/* ============================================================
   SEMANTIC ELEMENT STYLES
   Apply these via class or directly to semantic tags.
   ============================================================ */

/* Reset / base */
html, body {
  background: var(--bg-primary-light);
  color: var(--text-on-light);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Headings — always serif */
.h-display-xl, .hm-display-xl {
  font-family: var(--font-serif);
  font-size: var(--fs-display-xl);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--tk-tight);
}
.h-display-l, .hm-display-l {
  font-family: var(--font-serif);
  font-size: var(--fs-display-l);
  font-weight: var(--fw-semibold);
  line-height: 1.05;
  letter-spacing: -0.01em;
}
h1, .hm-h1 {
  font-family: var(--font-serif);
  font-size: var(--fs-h1);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  letter-spacing: var(--tk-tight);
}
h2, .hm-h2 {
  font-family: var(--font-serif);
  font-size: var(--fs-h2);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
}
h3, .hm-h3 {
  font-family: var(--font-serif);
  font-size: var(--fs-h3);
  font-weight: var(--fw-semibold);
  line-height: 1.15;
}

/* Body text */
.hm-body-l {
  font-family: var(--font-sans);
  font-size: var(--fs-body-l);
  font-weight: var(--fw-regular);
  line-height: var(--lh-normal);
}
.hm-body-m, p {
  font-family: var(--font-sans);
  font-size: var(--fs-body-m);
  font-weight: var(--fw-regular);
  line-height: 1.45;
}
.hm-body-s {
  font-family: var(--font-sans);
  font-size: var(--fs-body-s);
  font-weight: var(--fw-regular);
  line-height: 1.4;
  letter-spacing: 0.01em;
}

/* Numeric impact */
.hm-numeric {
  font-family: var(--font-numeric);
  font-size: var(--fs-display-numeric);
  font-weight: var(--fw-heavy);
  line-height: 0.9;
  letter-spacing: 0;
}

/* Quote */
.hm-quote {
  font-family: var(--font-italic);
  font-size: var(--fs-quote);
  font-style: italic;
  font-weight: var(--fw-medium);
  line-height: 1.2;
  letter-spacing: -0.005em;
}

/* CTA keyword uppercase tracked */
.hm-cta {
  font-family: var(--font-sans);
  font-size: var(--fs-cta);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--tk-wide);
  line-height: 1.0;
}

/* Metadata / selo uppercase */
.hm-meta {
  font-family: var(--font-sans);
  font-size: var(--fs-badge);
  font-weight: var(--fw-medium);
  text-transform: uppercase;
  letter-spacing: var(--tk-wider);
  line-height: 1.5;
}

/* ============================================================
   UTILITY: backgrounds / text colors
   ============================================================ */
.hm-bg-tundra   { background: var(--bg-primary-dark);  color: var(--text-on-dark); }
.hm-bg-musgo    { background: var(--bg-secondary-dark); color: var(--text-on-dark); }
.hm-bg-carvao   { background: var(--bg-deepest);       color: var(--text-on-dark); }
.hm-bg-folha    { background: var(--accent-action);    color: var(--text-on-dark); }
.hm-bg-menta    { background: var(--bg-accent-light);  color: var(--text-on-light); }
.hm-bg-bege     { background: var(--bg-primary-light); color: var(--text-on-light); }

.hm-text-tundra { color: var(--text-on-light-secondary); }
.hm-text-carvao { color: var(--text-on-light); }
.hm-text-folha  { color: var(--text-accent-saturated); }
.hm-text-bege   { color: var(--text-on-dark); }
.hm-text-menta  { color: var(--text-muted-on-dark); }

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}