/* ══════════════════════════════════════════════════════
   tokens.css — Design tokens 1000megabytes
   Paleta, tipografia e espaçamentos como CSS custom properties.
   Inclui este ficheiro ANTES de qualquer outro CSS.
   ══════════════════════════════════════════════════════ */

/* Fonts loaded via <link> in HTML head (preconnect + stylesheet) — not @import to avoid render-blocking */

:root {

  /* ── Cores ───────────────────────────────────────────
     Usar sempre as variáveis, nunca valores directos.
  ──────────────────────────────────────────────────── */

  /* Primária — azul petróleo */
  --c-primary:       #476f8c;
  --c-primary-dark:  #345569;
  --c-primary-light: #6b9cb5;
  --c-primary-bg:    #e8f0f5;   /* fundo de secção primária */

  /* Acento — âmbar */
  --c-accent:        #cb821b;
  --c-accent-dark:   #a36615;
  --c-accent-light:  #e8a040;
  --c-accent-bg:     #fdf3e3;

  /* Neutros */
  --c-dark:          #2a3645;   /* footer, fundo escuro */
  --c-text:          #515151;   /* corpo de texto */
  --c-muted:         #696969;   /* texto secundário — 5.4:1 em fundo branco */
  --c-border:        #ccd7da;   /* bordas */
  --c-bg-light:      #f2f2f2;   /* fundo alternado claro */
  --c-bg-mid:        #ececec;   /* separadores */
  --c-white:         #ffffff;
  --c-black:         #000000;

  /* Estado */
  --c-success:       #2e7d32;
  --c-error:         #c62828;


  /* ── Tipografia ──────────────────────────────────────
  ──────────────────────────────────────────────────── */

  --font-heading: 'Lato', sans-serif;
  --font-body:    'Montserrat', sans-serif;

  /* Escala de tamanhos */
  --text-xs:   0.8125rem;   /* 13px */
  --text-sm:   0.9375rem;   /* 15px */
  --text-base: 1.0625rem;   /* 17px — corpo */
  --text-md:   1.1875rem;   /* 19px */
  --text-lg:   1.25rem;     /* 20px */
  --text-xl:   1.375rem;    /* 22px */
  --text-2xl:  1.5625rem;   /* 25px */
  --text-3xl:  1.875rem;    /* 30px */
  --text-4xl:  2.9375rem;   /* 47px — h2 grande */
  --text-5xl:  5.125rem;    /* 82px — h1 hero */

  /* Alturas de linha */
  --lh-tight:  1.2;
  --lh-snug:   1.3;
  --lh-normal: 1.5;
  --lh-relaxed:1.7;
  --lh-loose:  1.9;

  /* Pesos */
  --fw-light:   300;
  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semi:    600;
  --fw-bold:    700;
  --fw-black:   900;


  /* ── Espaçamentos ────────────────────────────────────
     Base 4px, escala x2 depois do 8
  ──────────────────────────────────────────────────── */

  --sp-1:   4px;
  --sp-2:   8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-8:  32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-20: 80px;
  --sp-24: 96px;
  --sp-32: 128px;

  /* Padding padrão de secção */
  --section-py: var(--sp-20);   /* 80px desktop */
  --section-py-sm: var(--sp-12); /* 48px mobile */

  /* Contentor */
  --container-max: 1170px;
  --container-px:  var(--sp-5);  /* 20px lateral */


  /* ── Bordas e sombras ────────────────────────────────
  ──────────────────────────────────────────────────── */

  --radius-sm:  4px;
  --radius-md:  8px;
  --radius-lg:  16px;
  --radius-pill: 100px;

  --shadow-sm:  0 1px 3px rgba(0,0,0,.10), 0 1px 2px rgba(0,0,0,.06);
  --shadow-md:  0 4px 12px rgba(0,0,0,.10), 0 2px 4px rgba(0,0,0,.06);
  --shadow-lg:  0 10px 28px rgba(0,0,0,.12), 0 4px 8px rgba(0,0,0,.06);
  --shadow-xl:  0 20px 48px rgba(0,0,0,.14);

  /* ── Transições ──────────────────────────────────────
  ──────────────────────────────────────────────────── */

  --transition: 200ms ease;
  --transition-slow: 350ms ease;
}

/* Ajustes mobile dos tokens */
@media (max-width: 767px) {
  :root {
    --section-py:    var(--sp-12);
    --section-py-sm: var(--sp-8);
    --container-px:  var(--sp-4);
  }
}