@import url('https://fonts.googleapis.com/css2?family=Anton&family=Oswald:wght@200;400;500;600;700&family=Archivo:wght@100..900&display=swap');

:root {

  /* ────────────────────────────────────────
     CORES
  ──────────────────────────────────────── */
  --color-accent:          #73C20D;
  --color-accent-glow:     rgba(115, 194, 13, 0.14);
  --color-accent-grid:     rgba(115, 194, 13, 0.10);
  --color-bg:              #000000;
  --color-surface:         #0d0d0d;
  --color-text-primary:    #FFFFFF;
  --color-text-body:       #d1d1d1;
  --color-text-secondary:  #c7c7c7;
  --color-text-tertiary:   #9e9e9e;
  --color-text-dim:        #8c8c8c;

  /* ────────────────────────────────────────
     TIPOGRAFIA: FAMILIAS
  ──────────────────────────────────────── */
  --font-display: 'Anton', sans-serif;
  --font-label:   'Oswald', sans-serif;
  --font-body:    'Archivo', sans-serif;

  /* ────────────────────────────────────────
     ESCALA TIPOGRAFICA
  ──────────────────────────────────────── */
  --text-display-hero:  5.5rem;    /* 88px  — Anton 400 */
  --text-display-large: 4.5rem;   /* 72px  — Anton 400 */
  --text-h2:            3.5rem;   /* 56px  — Anton 400 */
  --text-h3:            2rem;     /* 32px  — Oswald 600 uppercase */
  --text-eyebrow:       0.875rem; /* 14px  — Oswald 600 uppercase */
  --text-body-large:    1.25rem;  /* 20px  — Archivo 400 */
  --text-body:          1rem;     /* 16px  — Archivo 400 */
  --text-caption:       0.8125rem;/* 13px  — Oswald 500 uppercase */

  /* ────────────────────────────────────────
     LETTER-SPACING
  ──────────────────────────────────────── */
  --tracking-display: -0.5px;
  --tracking-h3:       1px;
  --tracking-eyebrow:  6px;
  --tracking-caption:  3px;

  /* ────────────────────────────────────────
     LINE-HEIGHT
  ──────────────────────────────────────── */
  --leading-display-hero:  1.08;
  --leading-display-large: 1.05;
  --leading-h2:            1.12;
  --leading-h3:            1.2;
  --leading-body-large:    1.5;
  --leading-body:          1.6;

  /* ────────────────────────────────────────
     SPACING (12 passos)
  ──────────────────────────────────────── */
  --space-1:  0.25rem;  /*   4px */
  --space-2:  0.5rem;   /*   8px */
  --space-3:  0.75rem;  /*  12px */
  --space-4:  1rem;     /*  16px */
  --space-5:  1.5rem;   /*  24px */
  --space-6:  2rem;     /*  32px */
  --space-7:  3rem;     /*  48px */
  --space-8:  4rem;     /*  64px */
  --space-9:  6rem;     /*  96px */
  --space-10: 8rem;     /* 128px */
  --space-11: 12rem;    /* 192px */
  --space-12: 16rem;    /* 256px */

  /* ────────────────────────────────────────
     SPACING SEMANTICO
  ──────────────────────────────────────── */
  --page-padding-x:  4.5rem;   /* 72px  — padding lateral de pagina */
  --section-padding-y: 6rem;   /* 96px  — padding vertical de secao minimo */
  --element-gap:     4rem;     /* 64px  — gap entre blocos internos */
  --bar-gap:         2.125rem; /* 34px  — espaco abaixo da barra antes do h1 */

  /* ────────────────────────────────────────
     RADIUS
  ──────────────────────────────────────── */
  --radius-none:       0px;  /* hero, containers, imagens */
  --radius-pill-small: 3px;  /* barra de acento 64x6px */
  --radius-button:     8px;  /* CTA buttons */
  --radius-dot:        5px;  /* dot de navegacao ativo */

  /* ────────────────────────────────────────
     SHADOWS
  ──────────────────────────────────────── */
  --shadow-text-display:  0 2px 22px rgba(0, 0, 0, 0.50);
  --shadow-kick-text:     0 1px 14px rgba(0, 0, 0, 0.65);
  --shadow-cta-glow:      0 16px 50px rgba(115, 194, 13, 0.40);
  --shadow-divider-glow:  0 0 24px rgba(115, 194, 13, 0.70);
  --shadow-vignette:      inset 0 0 320px 60px rgba(0, 0, 0, 0.90);

  /* ────────────────────────────────────────
     ELEMENTOS FIXOS (barra acento + divisoria)
  ──────────────────────────────────────── */
  --bar-accent-width:  64px;
  --bar-accent-height: 6px;
  --bar-accent-bg:     #73C20D;
  --bar-accent-radius: 3px;

  --divider-vertical-width: 4px;
  --divider-vertical-bg:    #73C20D;
}