/* ==========================================================================
   TOKENS.CSS — Fonte única de verdade de Design System
   Extraído literalmente da Direcção Criativa (Fase 5) — Scrollup Imobiliária.
   NUNCA hardcode um valor de cor/tipografia/espaçamento fora deste ficheiro.
   Qualquer novo componente DEVE consumir estas variáveis (Parte E.3).
   ========================================================================== */

:root{
  /* ---------- Cor (Fase 5 — Direcção Criativa) ----------
     Nota de governação: a folha técnica do PDF do logótipo imprime
     "Blue R187/G189/B192" (~#BBBDC0). A amostragem de pixel nos 3 ficheiros
     de logótipo confirma de forma consistente #1F2051 como o navy real.
     Tratado como erro de transcrição do PDF — ver Direcção Criativa,
     Nota Metodológica. Este é o valor oficial usado em produção. */
  --color-primary:      #1F2051; /* Azul ScrollUp — extraído por pixel do logótipo */
  --color-primary-dark: #14163A; /* hover/active do primary */
  --color-accent:       #F9D208; /* Amarelo ScrollUp — extraído por pixel do logótipo */
  --color-accent-dark:  #C9AB00; /* hover/active do accent */

  --color-bg:           #FFFFFF;
  --color-surface:      #F7F7F5;
  --color-surface-alt:  #EEEEF3; /* navy tint ~5% */
  --color-border:       #E2E2E8;

  --color-text:         #1C1C22;
  --color-text-muted:   #5B5B66;
  --color-text-on-navy:       #FFFFFF;
  --color-text-on-navy-muted: rgba(255,255,255,.82);

  /* Funcionais — NÃO existem no logótipo; derivadas de forma neutra.
     Direcção Criativa assinala-as como placeholder a validar com o cliente. */
  --color-success: #2E7D32;
  --color-warning: #F2A900;
  /* Corrigido na auditoria E.1: #D64545 sobre branco só dá 4.38:1, abaixo
     do mínimo AA (4.5:1) para texto de erro em formulários. #C93E3E dá
     4.95:1 — mesma família de vermelho, agora conforme. */
  --color-error:   #C93E3E;

  /* Gradiente de marca — valor literal da Fase 2 (Moodboard) */
  --gradient-institutional: linear-gradient(135deg, #1F2051 0%, #2E3470 60%, #1F2051 100%);

  /* ---------- Tipografia (Fase 5) ----------
     A Direcção Criativa deixou o par tipográfico como PLACEHOLDER
     (duas famílias-exemplo, sem licença final escolhida). Decisão de
     execução tomada na Parte C do protótipo aprovado: Poppins (display
     geométrica) + Inter (corpo humanista) — a opção sans-only, não a
     opção serif, por coerência com o nível de ambição Stripe/Linear.
     Ver bloco de confirmação no início da resposta para justificação. */
  --font-display: 'Poppins', 'Century Gothic', sans-serif;
  --font-body:    'Inter', 'Public Sans', sans-serif;

  --fs-display: clamp(2.125rem, 1.6rem + 2.4vw, 4rem);      /* 34px -> 64px, Hero H1 */
  --fs-h2:      clamp(1.625rem, 1.4rem + 1vw, 2.5rem);       /* 26px -> 40px */
  --fs-h3:      clamp(1.125rem, 1rem + 0.4vw, 1.5rem);       /* 18px -> 24px */
  --fs-body:    clamp(1rem, 0.95rem + 0.15vw, 1.125rem);     /* 16px -> 18px */
  --fs-caption: clamp(0.75rem, 0.72rem + 0.1vw, 0.875rem);   /* 12px -> 14px */
  --fs-button:  1rem;                                        /* 15-16px */

  --lh-display: 1.12;
  --lh-heading: 1.18;
  --lh-body:    1.6;

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semibold:600;
  --fw-bold:    700;

  /* Tracking — correcção óptica exigida na Parte D (Elevação) para
     display em tamanhos grandes: negativo em títulos, positivo em kickers */
  --tracking-display: -0.02em;
  --tracking-heading: -0.01em;
  --tracking-kicker:  0.14em;

  /* ---------- Espaçamento (Fase 5) ---------- */
  --space-1:4px;  --space-2:8px;  --space-3:12px; --space-4:16px;
  --space-6:24px; --space-8:32px; --space-12:48px; --space-16:64px;
  --space-24:96px; --space-32:128px;

  --container-max: 1200px;
  --bleed-max: 1440px;
  --gutter-desktop: 24px;
  --gutter-mobile: 16px;

  /* ---------- Radius (Fase 5) ---------- */
  --radius-btn: 8px;
  --radius-card: 16px;
  --radius-image: 12px;
  --radius-modal: 20px;

  /* ---------- Sombras — engenharia física (Craftsmanship C03) ----------
     Cada nível deixa de ser um único blur e passa a ter 3 camadas reais:
     contacto (curta, nítida, onde a superfície "toca" o fundo), forma
     (médio alcance, dá volume) e ambiente (larga, muito suave, simula luz
     difusa a preencher a sombra em vez de um corte abrupto). Nenhuma
     sombra usa opacidade única — isso é o que faz uma sombra parecer CSS
     em vez de física. */
  --shadow-btn:
    0 1px 1px rgba(31,32,81,0.10),
    0 2px 4px rgba(31,32,81,0.08);
  --shadow-1:
    0 1px 2px rgba(31,32,81,0.06),
    0 4px 10px rgba(31,32,81,0.08),
    0 12px 24px rgba(31,32,81,0.06);
  --shadow-2:
    0 2px 4px rgba(31,32,81,0.08),
    0 10px 24px rgba(31,32,81,0.12),
    0 28px 56px rgba(31,32,81,0.14);
  --shadow-image:
    0 2px 6px rgba(31,32,81,0.10),
    0 12px 28px rgba(31,32,81,0.12);
  --shadow-modal:
    0 4px 10px rgba(31,32,81,0.12),
    0 24px 48px rgba(31,32,81,0.18),
    0 48px 96px rgba(31,32,81,0.10);
  /* camada de contacto — o ponto exacto onde a superfície "pousa" */
  --shadow-contact: 0 1px 1px rgba(31,32,81,0.14);

  /* ---------- Motion (Fase 7 + Parte D + Craftsmanship C04) ---------- */
  --ease-standard: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
  /* leve overshoot — usado só em micro-interacções de resposta directa ao
     gesto (magnético, regresso de hover), nunca em reveals de conteúdo:
     dá sensação de elasticidade física, não de "salto" mecânico. */
  --ease-overshoot: cubic-bezier(.34,1.56,.64,1);
  --duration-fast: 150ms;
  --duration-base: 250ms;
  --duration-slow: 500ms;
  --duration-hero: 900ms;
  --stagger-step: 80ms; /* coreografia entre elementos relacionados, Fase 8 */

  /* Ângulo de marca — extraído do motivo do logótipo (Fase 1/2) */
  --brand-angle: 28deg;
}

@media (prefers-reduced-motion: reduce){
  :root{ --duration-fast:0ms; --duration-base:0ms; --duration-slow:0ms; --duration-hero:0ms; --stagger-step:0ms; }
}