/* PAMIR — design tokens
   Fonte única de verdade para cor, tipografia, espaço, chanfro e movimento.
   motion.js lê daqui as durações (counter, stagger): não as repetir em JS. */

/* ---------- fontes (auto-hospedadas, subconjunto latin) ---------- */
@font-face {
  font-family: "Archivo";
  src: url("fonts/archivo-latin-var.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Instrument Sans";
  src: url("fonts/instrument-sans-latin-var.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

/* tamanho do chanfro: registado para poder ser animado */
@property --c {
  syntax: "<length>";
  inherits: false;
  initial-value: 14px;
}

:root {
  /* ---------- cor ---------- */
  --brand-primary: #F47B20;        /* laranja PAMIR: acentos, números, estados, CTA */
  --brand-primary-600: #E06A10;    /* hover */
  --brand-primary-700: #C4560C;    /* laranja escuro: ícones e números grandes sobre claro (3,8:1) */
  --brand-primary-800: #A8470A;    /* texto pequeno laranja sobre claro (4,9:1) */

  --ink-900: #0C1B33;              /* azul-marinho: tinta e fundo escuro */
  --ink-800: #16294A;              /* cartões sobre escuro */
  --ink-700: #2A3A55;              /* corpo de texto */
  --ink-500: #4A586B;              /* texto secundário */
  --ink-300: #C9D1DB;              /* bordas sobre claro */

  --paper: #F4F6F7;                /* superfície clara */
  --ground: #E9ECEE;               /* fundo da página */
  --tone: #DDE2E6;                 /* secção alternada */
  --on-ink: #E9ECEE;               /* texto sobre escuro */
  --on-ink-muted: #A9B5C6;

  --overlay-photo: linear-gradient(180deg, rgba(12, 27, 51, .25) 0%, rgba(12, 27, 51, .78) 100%);

  /* ---------- tipografia ---------- */
  --f-display: "Archivo", system-ui, sans-serif;
  --f-body: "Instrument Sans", system-ui, sans-serif;

  --fs-hero: clamp(2.5rem, 7vw, 6.5rem);
  --fs-h2: clamp(2rem, 4.6vw, 4rem);
  --fs-h3: clamp(1.35rem, 2vw, 1.75rem);
  --fs-body: 1.0625rem;
  --fs-eyebrow: .75rem;
  --fs-stat: clamp(2.5rem, 5vw, 4.5rem);
  --tracking-display: -.035em;
  --tracking-eyebrow: .18em;

  /* ---------- espaço (escala 4px) ---------- */
  --sp-4: 4px;  --sp-8: 8px;  --sp-12: 12px; --sp-16: 16px; --sp-24: 24px;
  --sp-32: 32px; --sp-48: 48px; --sp-64: 64px; --sp-96: 96px; --sp-128: 128px; --sp-160: 160px;

  /* ritmo vertical: ÚNICO valor de espaço entre secções. Vem só do padding da própria secção. */
  --section-py: clamp(5rem, 10vw, 10rem);
  --max: 1320px;
  --gutter: clamp(1.25rem, 5vw, 4rem);
  --header-h: 76px;
  --header-threshold: 64;          /* px de scroll em que a barra muda de estado (lido por JS) */

  /* ---------- chanfro (assinatura gráfica; substitui raios) ---------- */
  --chamfer-sm: 8px;
  --chamfer-md: 14px;
  --chamfer-lg: 24px;

  --shadow: 0 1px 2px rgba(12, 27, 51, .05), 0 12px 32px rgba(12, 27, 51, .10);

  /* ---------- movimento ----------
     Curvas e tempos medidos na referência (REFERENCIA.md §3–4). */
  --ease-out-expo: cubic-bezier(.16, 1, .3, 1);       /* ref. --ease-out */
  --ease-reveal: cubic-bezier(.215, .61, .355, 1);    /* aprox. de power3.out (reveals da ref.) */
  --ease-standard: cubic-bezier(.4, 0, .2, 1);        /* ref. --ease-standard */
  --ease-in-out-quart: cubic-bezier(.77, 0, .175, 1); /* ref. */
  --ease-back: cubic-bezier(.34, 1.56, .64, 1);       /* ref. */

  --dur-micro: 200ms;
  --dur-ui: 300ms;        /* header, estados */
  --dur-chamfer: 280ms;   /* o corte cresce (sm → md) */
  --dur-link: 280ms;
  --dur-reveal: 800ms;
  --dur-hero: 1000ms;
  --dur-counter: 2200ms;
  --dur-menu: 600ms;
  --dur-marquee: 28s;
  --stagger: 80ms;
  --stagger-menu: 60ms;
  --stagger-map: 40ms;       /* entrada das províncias */
}

/* ---------- utilitário de chanfro ----------
   .chamfer            canto superior-esquerdo (por omissão)
   .chamfer--tr        só superior-direito      .chamfer--bl  só inferior-esquerdo
   .chamfer--br        só inferior-direito
   .chamfer--diag      superior-esquerdo + inferior-direito
   .chamfer--diag-r    superior-direito + inferior-esquerdo
   .chamfer--sm/md/lg  tamanho
   .chamfer--grow      sm → md ao pairar / focar (assinatura de movimento) */
.chamfer, .btn {
  --c: var(--chamfer-md);
  --tl: 1; --tr: 0; --br: 0; --bl: 0;
  clip-path: polygon(
    calc(var(--c) * var(--tl)) 0,
    calc(100% - var(--c) * var(--tr)) 0,
    100% calc(var(--c) * var(--tr)),
    100% calc(100% - var(--c) * var(--br)),
    calc(100% - var(--c) * var(--br)) 100%,
    calc(var(--c) * var(--bl)) 100%,
    0 calc(100% - var(--c) * var(--bl)),
    0 calc(var(--c) * var(--tl))
  );
  transition: --c var(--dur-chamfer) var(--ease-out-expo);
}
.chamfer--tr { --tl: 0; --tr: 1; }
.chamfer--bl { --tl: 0; --bl: 1; }
.chamfer--br { --tl: 0; --br: 1; }
.chamfer--diag { --br: 1; }
.chamfer--diag-r { --tl: 0; --tr: 1; --bl: 1; }
.chamfer--sm { --c: var(--chamfer-sm); }
.chamfer--md { --c: var(--chamfer-md); }
.chamfer--lg { --c: var(--chamfer-lg); }
.chamfer--grow, .btn { --c: var(--chamfer-sm); }
.chamfer--grow:hover, .chamfer--grow:focus-within, .chamfer--grow:focus-visible, .btn:hover, .btn:focus-visible { --c: var(--chamfer-md); }

@media (prefers-reduced-motion: reduce) {
  .chamfer, .btn { transition: none; }
}