/* ==========================================================================
   Pugnar — Design Tokens
   Fonte: docs/design-system.md  ·  Direção: 70% preto / 20% claro / 10% lima
   Todos os rácios de contraste indicados foram calculados (WCAG 2.1).
   ========================================================================== */

:root {
  /* ---------- Cor: oficiais da marca ---------------------------------- */
  --black:            #141413;
  --lime:             #91ED09;
  --white:            #FFFFFF;
  --off-white:        #F8F3EF;
  --gray:             #9F9F9D;

  --text-primary:     #FFFFFF;   /* 18.43:1 sobre --black  AAA */
  --text-secondary:   #9F9F9D;   /*  6.95:1 sobre --black  AA  */

  --background:       #141413;
  --background-light: #F8F3EF;

  --accent:           #91ED09;   /* 12.57:1 sobre --black  AAA */

  /* ---------- Cor: superfícies escuras -------------------------------- */
  --surface-1:        #1C1C1A;
  --surface-2:        #24241F;
  --surface-3:        #2E2E29;

  /* ---------- Cor: linhas --------------------------------------------- */
  --border:           #2E2E29;
  --border-strong:    #4F4F4C;
  --border-light:     #E4DED8;

  /* ---------- Cor: texto em secções claras ----------------------------
     --text-secondary (#9F9F9D) obtém apenas 2.41:1 sobre --background-light
     e REPROVA em WCAG. Usar sempre os tokens abaixo em fundo claro.       */
  --text-on-light:            #141413;   /* 16.73:1  AAA */
  --text-secondary-on-light:  #6E6E6C;   /*  4.64:1  AA  */

  /* ---------- Cor: estados do acento ---------------------------------- */
  --lime-hover:       #A3F52B;
  --lime-press:       #7FD400;
  --lime-dim:         rgba(145, 237, 9, 0.14);

  /* ---------- Cor: semânticos ----------------------------------------- */
  --danger:           #FF5A47;
  --success:          #91ED09;

  /* ---------- Fotografia ---------------------------------------------- */
  --img-scrim: linear-gradient(180deg,
                 rgba(20, 20, 19, 0) 0%,
                 rgba(20, 20, 19, 0.85) 100%);

  /* ---------- Tipografia ----------------------------------------------
     Archivo (display, 700/800/900) + Inter (corpo, 400/500).
     Carregar com font-display: swap e subset latino.                      */
  --font-display: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --font-body:    'Inter', -apple-system, 'Segoe UI', Roboto, sans-serif;

  /* Os MINIMOS destes clamp() valem só em ecrãs estreitos: acima do ponto de
     cruzamento manda o termo vw. Estavam afinados para desktop, o que fazia
     um telemóvel de 375px renderizar tudo no mínimo — o título do hero saía
     a 56px e ocupava meio ecrã.
     Baixar só o mínimo corrige o mobile e deixa o desktop exatamente igual:
     a 1024px+ nenhum destes valores é o mínimo. */
  --fs-display: clamp(2.5rem, 11vw, 9rem);      /* 375px: 56 -> 41 */
  --fs-h1:      clamp(2rem, 7vw, 5rem);         /* 375px: 40 -> 32 */
  --fs-h2:      clamp(1.625rem, 4.5vw, 3.25rem);/* 375px: 32 -> 26 */
  --fs-h3:      clamp(1.25rem, 2.5vw, 1.875rem);/* 375px: 22 -> 20 */
  --fs-h4:      1.125rem;
  --fs-body:    1rem;
  --fs-small:   0.875rem;
  --fs-label:   0.75rem;

  --lh-display: 0.88;
  --lh-h1:      0.95;
  --lh-h2:      1.05;
  --lh-h3:      1.15;
  --lh-body:    1.65;

  --tr-display: -0.04em;
  --tr-h1:      -0.03em;
  --tr-h2:      -0.02em;
  --tr-label:    0.14em;

  --measure:    68ch;

  /* ---------- Espaçamento (base 4px) ----------------------------------- */
  --sp-1:  4px;    --sp-2:  8px;    --sp-3:  12px;   --sp-4:  16px;
  --sp-5:  24px;   --sp-6:  32px;   --sp-7:  48px;   --sp-8:  64px;
  --sp-9:  96px;   --sp-10: 128px;  --sp-11: 160px;  --sp-12: 200px;

  /* mobile — ver media queries abaixo. 96px entre secções obrigava a rolar
     muito num telemóvel; 64px mantém o respiro sem esticar a página. */
  --section-gap: var(--sp-8);

  /* ---------- Grelha --------------------------------------------------- */
  --container:      1440px;
  --container-text: 720px;
  --gutter:         20px;       /* mobile — ver media queries abaixo */

  /* ---------- Raio ----------------------------------------------------- */
  --radius-none: 0;
  --radius-sm:   2px;
  --radius-md:   4px;
  --radius-pill: 999px;

  /* ---------- Animação -------------------------------------------------- */
  --ease:       cubic-bezier(.4, 0, .2, 1);
  --ease-out:   cubic-bezier(0, 0, .2, 1);
  --dur-fast:   150ms;
  --dur-base:   250ms;
  --dur-slow:   400ms;
  --dur-reveal: 600ms;

  /* ---------- Alvo tátil ------------------------------------------------ */
  --tap-min: 48px;
}

/* ---------- Breakpoints ------------------------------------------------ */
/* --bp-sm 480 · --bp-md 768 · --bp-lg 1024 · --bp-xl 1280 · --bp-2xl 1536 */

@media (min-width: 768px) {
  :root {
    --section-gap: var(--sp-10);
    --gutter:      40px;
  }
}

@media (min-width: 1024px) {
  :root {
    --section-gap: var(--sp-11);
    --gutter:      64px;
  }
}

@media (min-width: 1280px) {
  :root {
    --section-gap: var(--sp-12);
  }
}

/* ---------- Secções claras ---------------------------------------------
   Aplicar .on-light a qualquer bloco com fundo --background-light.
   Remapeia os tokens de texto para valores que passam WCAG em fundo claro. */
.on-light {
  background: var(--background-light);
  --text-primary:   var(--text-on-light);
  --text-secondary: var(--text-secondary-on-light);
  --border:         var(--border-light);
  color: var(--text-primary);
}

/* ---------- Base --------------------------------------------------------- */
body {
  background: var(--background);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  text-transform: uppercase;
}

h1 { font-size: var(--fs-h1); font-weight: 800; line-height: var(--lh-h1); letter-spacing: var(--tr-h1); }
h2 { font-size: var(--fs-h2); font-weight: 800; line-height: var(--lh-h2); letter-spacing: var(--tr-h2); }
h3 { font-size: var(--fs-h3); font-weight: 700; line-height: var(--lh-h3); }
h4 { font-size: var(--fs-h4); font-weight: 700; text-transform: none; }

p { max-width: var(--measure); }

:focus-visible {
  outline: 2px solid var(--lime);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}