/* =========================================================
   GPMH — Design Tokens
   Great People Mental Health
   v1.1 · 2026-04
   ---------------------------------------------------------
   REGRA DE FONTE (importante)
   Pesos disponíveis na PP Neue Corp:
     200 Ultralight        — texto editorial / hero leve
     200 Italic            — quotes em itálico fino
     500 Medium            — DEFAULT para corpo, UI, captions
     900 Ultrabold         — DISPLAY apenas: títulos H0/H1 grandes
                             (≥ 96px). NUNCA usar em corpo, legenda,
                             botão, tag ou texto < 56px.
   Removidos do sistema (peso extremo, ilegíveis em corpo):
     800 Black, 800 Black Italic
   ========================================================= */

/* -------- Fonts -------- */
@font-face {
  font-family: "PP Neue Corp Compact";
  src: url("fonts/PPNeueCorp-CompactUltralight.otf") format("opentype");
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "PP Neue Corp Compact";
  src: url("fonts/PPNeueCorp-CompactMedium.otf") format("opentype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "PP Neue Corp Compact";
  src: url("fonts/PPNeueCorp-CompactUltrabold.otf") format("opentype");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

/* -------- Tokens -------- */
:root {
  /* Core palette */
  --gp-black:      #000000;
  --gp-porcelain:  #EEF3F2;  /* off-white primário */
  --gp-linen:      #E3DDD2;  /* bege / satin linen */
  --gp-cerise:     #FF006B;  /* rosa / accent — cerise red */

  /* Derivadas utilitárias */
  --gp-ink:        #0A0A0A;
  --gp-smoke:      #1A1A1A;
  --gp-fog:        #D4D4D4;
  --gp-cerise-10:  rgba(255, 0, 107, 0.10);
  --gp-cerise-30:  rgba(255, 0, 107, 0.30);

  /* Tipografia — uma família, três pesos */
  --gp-font-display:   "PP Neue Corp Compact", system-ui, sans-serif;
  --gp-font-body:      "PP Neue Corp Compact", system-ui, sans-serif;

  /* Tipografia — pesos (use estes tokens, NÃO escreva números soltos) */
  --gp-w-light:   200;   /* Ultralight */
  --gp-w-body:    500;   /* Medium  — DEFAULT para tudo que se lê */
  --gp-w-display: 900;   /* Ultrabold — só títulos display ≥ 96px */

  /* Limite de uso de Ultrabold:
     se font-size < var(--gp-display-min), troque para 500. */
  --gp-display-min: 96px;

  /* Escala (16:9 @ 1920x1080) */
  --gp-size-mega:  220px;   /* títulos heróicos */
  --gp-size-xl:    140px;
  --gp-size-lg:    96px;
  --gp-size-md:    56px;
  --gp-size-sm:    36px;
  --gp-size-body:  26px;
  --gp-size-cap:   18px;    /* caption / overline */

  /* Espaçamento em grid */
  --gp-gutter: 72px;
  --gp-edge:   80px;

  /* Radii — marca NÃO usa bordas arredondadas em geral (brutalista).
     Apenas bola do logo / pontos são circulares. */
  --gp-radius-0: 0px;
  --gp-radius-full: 9999px;

  /* Stroke / borda */
  --gp-stroke: 2px;
  --gp-stroke-thick: 6px;
}

/* -------- Defaults globais (legibilidade) ----------------
   Garantem que body/UI nunca caiam em peso extremo, mesmo
   se alguém esquecer de declarar. */
body {
  font-family: var(--gp-font-body);
  font-weight: var(--gp-w-body);
}

/* -------- Utilities reutilizáveis -------- */

/* Halftone sobre qualquer bg (pontos brancos/pretos) */
.gp-halftone-dark {
  background-image: radial-gradient(rgba(255,255,255,0.10) 1px, transparent 1.6px);
  background-size: 6px 6px;
}
.gp-halftone-light {
  background-image: radial-gradient(rgba(0,0,0,0.18) 1px, transparent 1.6px);
  background-size: 6px 6px;
}

/* Granulado discreto */
.gp-grain::after {
  content:"";
  position:absolute; inset:0;
  pointer-events:none;
  background-image: url("textures/grain-paper.jpg");
  background-size: 420px;
  mix-blend-mode: multiply;
  opacity: 0.18;
}

/* Marcador cerise — linha grossa por baixo do texto (usado para destaque rosa) */
.gp-mark-cerise {
  color: var(--gp-cerise);
}

/* Underline sólido rosa, estilo "caneta", usado pra sublinhar palavra chave.
   Peso medium (não black) para manter legibilidade. */
.gp-strike {
  background: var(--gp-cerise);
  color: var(--gp-porcelain);
  font-weight: var(--gp-w-body);
  padding: 0 .12em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

/* Image treatment: P&B alto contraste + granulado (como as references) */
.gp-bw {
  filter: grayscale(1) contrast(1.15) brightness(0.92);
}
.gp-duotone {
  filter: grayscale(1) contrast(1.2);
  background: var(--gp-black);
}

/* Pequena bola rosa — signature do logo. Use para finalizar títulos. */
.gp-dot {
  display: inline-block;
  width: 0.35em;
  height: 0.35em;
  border-radius: 50%;
  background: var(--gp-cerise);
  vertical-align: baseline;
  margin-left: 0.04em;
  translate: 0 -0.05em;
}

/* Rotação sutil — aplicar em elementos para sair da grade. Usar com MODERAÇÃO */
.gp-tilt-l { transform: rotate(-2deg); }
.gp-tilt-r { transform: rotate(2deg); }

/* Display class — atalho para títulos heróicos.
   Só aplicar em font-size ≥ 96px. */
.gp-display {
  font-family: var(--gp-font-display);
  font-weight: var(--gp-w-display);
  letter-spacing: -0.025em;
  line-height: 0.86;
}

/* Uppercase caption */
.gp-caption {
  font-family: var(--gp-font-body);
  font-weight: var(--gp-w-body);
  font-size: var(--gp-size-cap);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}