/* ============================================================================
   SISTEMA DE BREAKPOINTS — 3 tamanhos, desktop-first
   ============================================================================
   Desktop    >= 1400px   -> este ficheiro e os outros base (SEM @media)
   Tablet     810–1399px  -> assets/css/tablet.css
   Telemóvel  <= 809px    -> assets/css/mobile.css

   Regra de ouro: para mudar SÓ um tamanho, edita SÓ o ficheiro desse tamanho.
   Cada ficheiro de tier tem um único @media a envolver tudo, por isso é
   impossível escrever no tamanho errado por distração.

   Ordem de carregamento no HTML (a ordem importa — mobile ganha sobre tablet):
     fonts -> tokens -> base -> components -> sections -> tablet -> mobile

   Nota: os valores 1399/809 estão escritos à mão em cada ficheiro. CSS puro não
   permite var(--bp-x) dentro de @media e o projecto não tem build step. Se algum
   dia mudarem, mudam nos 2 ficheiros de tier e neste comentário — mais nenhum
   sítio (o único literal em JS vive em viatura/index.html e usa matchMedia).

   Estrutura interna igual nos 3: tokens · layout · header/nav · hero · grelha ·
   slider · filtros · páginas interiores · footer · flutuantes.
   ============================================================================ */

:root {
  /* Color — rebrand 2026-07-27: navy #0d1932 + laranja #ffae48 (nomes "navy"/"amber" mantidos para não tocar em todos os CSS) */
  --color-navy: #0d1932;
  --color-navy-700: #16223f;
  --color-navy-600: #22304f;
  --color-white: #ffffff;
  --color-amber: #ffae48;
  --color-amber-dark: #e8933a;
  --color-amber-ink: #a35c00;   /* orange-family text on light backgrounds — passes WCAG AA (~5:1) unlike #ffae48 */
  --color-amber-tint: #fff1dc;
  --color-ink: #0d1932;
  --color-muted: #6b6b6b;
  --color-muted-on-navy: #b3b3b3;
  --color-border: #e3e3e3;
  --color-border-on-navy: rgba(255, 255, 255, 0.2);
  --color-bg: #ffffff;
  --color-bg-alt: #eaeaea;
  --color-success: #2e7d46;
  --color-pending: #b8860b;
  --color-sold: #8a8f9c;
  --color-error: #c0392b;

  /* Typography — Figma: Bebas Neue nos títulos, Inter no resto */
  --font-display: 'Bebas Neue', 'Archivo', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;

  --fs-caption: 0.8125rem;   /* 13px */
  --fs-body-sm: 0.9375rem;   /* 15px */
  --fs-body: 1rem;           /* 16px */
  --fs-subhead: 1.5rem;      /* 24px — corpo/lede/eyebrow do Figma a 1440px */
  --fs-heading-sm: clamp(1.375rem, 1.1rem + 1vw, 1.75rem);
  --fs-heading: clamp(2.5rem, 1.5rem + 4.5vw, 6rem);   /* títulos de secção Bebas 96px no Figma */
  --fs-display: clamp(2.75rem, 1.4rem + 4.2vw, 4.8125rem);   /* hero: +13px no tecto (ronda 18), base subida em conjunto para não achatar o rácio face ao logótipo/botões em ecrãs estreitos */

  --lh-tight: 1.1;
  --lh-heading: 1.2;
  --lh-body: 1.55;

  /* Spacing (8px scale) */
  --space-1: 0.5rem;   /* 8px */
  --space-2: 1rem;     /* 16px */
  --space-3: 1.5rem;   /* 24px */
  --space-4: 2rem;     /* 32px */
  --space-5: 3rem;     /* 48px */
  --space-6: 4rem;     /* 64px */
  --space-7: 6rem;     /* 96px */

  /* Grid — Figma: 1440 com margens de 140px = conteúdo 1160px */
  --grid-max: 1160px;
  --grid-gutter: var(--space-3);
  --grid-margin: 44px;   /* tablet: 28px · telemóvel: 20px */

  /* Misc — Figma: radius 2px nos botões/cartões */
  --radius-sm: 2px;
  --radius: 2px;
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.06), 0 4px 16px rgba(0, 0, 0, 0.06);
  --shadow-card-hover: 0 2px 4px rgba(0, 0, 0, 0.08), 0 12px 28px rgba(0, 0, 0, 0.12);
  --ease: cubic-bezier(0.2, 0.7, 0.3, 1);
  --duration: 160ms;
}