/* PPN tokens: unica fonte de verdade de cor, tipo e ritmo */
:root {
  /* Extraidos por amostragem da maquete do cliente */
  --ppn-black:        #030508;
  --ppn-black-mag:    #08030A;
  --ppn-green:        #8CFF00;
  --ppn-magenta:      #FF00F2;
  --ppn-bone:         #F7F7F2;

  /* Derivados, apenas para washes de fundo e estados */
  --ppn-green-wash:   #050D09;
  --ppn-mag-wash:     #0A030C;
  --ppn-grey:         #9AA096;
  --ppn-line:         rgba(247, 247, 242, 0.12);
  --ppn-green-dim:    rgba(140, 255, 0, 0.14);
  --ppn-mag-dim:      rgba(255, 0, 242, 0.14);

  /* Azul e rosa dos botoes principais do hero */
  --ppn-green-deep: #4E9E00;
  --ppn-blue:      #2F6BFF;
  --ppn-blue-deep: #123FB8;
  --ppn-pink:      #FF3D9A;
  --ppn-pink-deep: #B8155F;
  --ppn-blue-a30:  rgba(47, 107, 255, 0.30);
  --ppn-blue-a55:  rgba(47, 107, 255, 0.55);
  --ppn-pink-a30:  rgba(255, 61, 154, 0.30);
  --ppn-pink-a55:  rgba(255, 61, 154, 0.55);

  /* Verde do logotipo fornecido, usado apenas no proprio logotipo */
  --ppn-logo-green:   #62FC00;

  /* Cor de acento por contexto, herdada pelos blocos */
  --accent: var(--ppn-green);
  --accent-dim: var(--ppn-green-dim);

  /* Alfas derivados das cores base, para overlays e estados.
     Sao os unicos valores rgba permitidos e todos derivam de --ppn-black,
     --ppn-bone, --ppn-green e --ppn-magenta. */
  --ppn-black-a95: rgba(3, 5, 8, 0.95);
  --ppn-black-a92: rgba(3, 5, 8, 0.92);
  --ppn-black-a80: rgba(3, 5, 8, 0.80);
  --ppn-black-a70: rgba(3, 5, 8, 0.70);
  --ppn-black-a45: rgba(3, 5, 8, 0.45);
  --ppn-black-a25: rgba(3, 5, 8, 0.25);
  --ppn-black-a00: rgba(3, 5, 8, 0);
  --ppn-bone-a72:  rgba(247, 247, 242, 0.72);
  --ppn-bone-a06:  rgba(247, 247, 242, 0.06);
  --ppn-bone-a03:  rgba(247, 247, 242, 0.03);
  --ppn-green-a08: rgba(140, 255, 0, 0.08);
  --ppn-green-a30: rgba(140, 255, 0, 0.30);
  --ppn-green-a55: rgba(140, 255, 0, 0.55);
  --ppn-mag-a08:   rgba(255, 0, 242, 0.08);
  --ppn-mag-a30:   rgba(255, 0, 242, 0.30);
  --ppn-mag-a55:   rgba(255, 0, 242, 0.55);
  --accent-a30: var(--ppn-green-a30);
  --accent-a55: var(--ppn-green-a55);
  --accent-a08: var(--ppn-green-a08);

  /* Valor solido usado apenas em mascaras (mask-image), onde so conta o alfa. */
  --mask-solid: #000;

  /* Tipografia */
  --font-display: "Playfair Display", "Bodoni Moda", Georgia, "Times New Roman", serif;
  --font-ui: "Inter", "Helvetica Neue", Arial, sans-serif;

  --fs-eyebrow: clamp(0.625rem, 0.58rem + 0.22vw, 0.75rem);
  --fs-label:   clamp(0.688rem, 0.65rem + 0.2vw, 0.813rem);
  --fs-body:    clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
  --fs-body-lg: clamp(1.063rem, 1rem + 0.4vw, 1.313rem);
  --fs-h3:      clamp(1.125rem, 1.05rem + 0.4vw, 1.375rem);
  --fs-h2:      clamp(1.875rem, 1.4rem + 2.2vw, 3.5rem);
  /* Titulo grande das seccoes Comprar e Vender */
  --fs-kicker-xl: clamp(2.25rem, 1.5rem + 3.6vw, 5rem);
  --fs-h1:      clamp(2.125rem, 1.55rem + 2.6vw, 4.25rem);
  --fs-display: clamp(1.75rem, 1.2rem + 2.6vw, 3.75rem);
  --fs-stat:    clamp(2rem, 1.5rem + 2.4vw, 3.25rem);

  --tracking-ui: 0.22em;

  /* Ritmo e medidas */
  --container: 1240px;
  --gutter: 24px;
  --section-y: clamp(48px, 5.4vw, 84px);
  --radius-btn: 2px;
  --radius-card: 22px;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --header-h: 68px;
}

@media (min-width: 900px) {
  :root { --gutter: 40px; --header-h: 84px; }
}