/* ===================================================================
   BRAPARK — Design tokens
   Fonte: ui-guide/guia-ui-webdesign-brapark.md (seção 15)

   [oficial]     lido do logo ou do kit global do Elementor do site antigo
   [derivado]    calculado a partir de um valor oficial (variante acessível)
   [recomendação] decisão de design desta agência

   Todos os contrastes citados foram calculados, não estimados.
   =================================================================== */

:root {
  /* --- Cores da marca [oficial] ------------------------------------ */
  --brand-red:          #CD0202;  /* "BRA" do logo — amostrado #C80000–#D00000 */
  --brand-blue:         #023297;  /* "PARK" do logo — amostrado #003090–#003098 */
  --brand-wine:         #851736;  /* meio real entre o vermelho e o azul */
  --brand-blue-deep:    #263078;
  --brand-red-deep:     #AD0F15;
  --brand-blue-light:   #8FB1F1;  /* 9,15:1 sobre --ink — AAA */
  --brand-aqua:         #A8DBD4;  /* 12,94:1 sobre --ink — AAA */
  --brand-sand:         #CFC9C2;  /* só divisória quente; nunca fundo */

  /* --- Derivados acessíveis [derivado] ------------------------------
     Obrigatórios sempre que a cor da marca vira TEXTO.
     --brand-red puro dá só 3,39:1 em fundo escuro: não serve para texto. */
  --red-strong:         #B00202;  /* 7,35:1 em branco  — AAA */
  --red-light:          #F0464C;  /* 5,35:1 em --ink   — AA  */
  --blue-night:         #0C1A4D;  /* 16,53:1 em branco — AAA */

  /* --- Tela escura (padrão da página) [derivado do deck institucional] */
  --ink:                #080A12;
  --ink-alt:            #0C0F19;
  --surface:            #10141F;
  --surface-raised:     #161B29;
  /* Os contrastes citados são contra --surface-raised (#161B29), que é o
     fundo MAIS CLARO em que cada cor pode cair. Medir só contra --ink dá
     um número bonito e falso: --text-3 marcava 4,58:1 no ink e reprovava
     com 3,98:1 em cima de um card com hover. */
  --text-1:             #FFFFFF;  /* 18,39:1 */
  --text-2:             #A7B2C9;  /*  8,06:1 */
  --text-3:             #828DA4;  /*  5,15:1 — mínimo da página */
  --line:               rgba(255, 255, 255, .10);
  --line-soft:          rgba(255, 255, 255, .06);
  --line-strong:        rgba(143, 177, 241, .45);

  /* --- Tela clara -------------------------------------------------- */
  --paper:              #FFFFFF;
  --paper-alt:          #F5F6FA;
  --on-paper-1:         #080A12;  /* 19,77:1 */
  --on-paper-2:         #44506B;  /*  8,06:1 */
  --on-paper-3:         #5A6782;  /*  5,68:1 */
  --border-light:       #E3E7EF;

  /* --- Funcionais [recomendação] ----------------------------------- */
  --ok-dark:            #A8DBD4;  /* aberto agora, em fundo escuro */
  --ok-light:           #1C7A54;
  --warn-dark:          #F0B429;  /* fecha em breve */
  --warn-light:         #9A5B00;
  --err-dark:           #F0464C;  /* fechado */
  --err-light:          #B00202;
  --info-dark:          #8FB1F1;
  --info-light:         #023297;

  /* --- Gradientes --------------------------------------------------
     O gradiente da marca aparece no MÁXIMO duas vezes na página:
     no CTA primário e em um único filete. Mais que isso vira o site antigo. */
  --grad-brand:   linear-gradient(118deg, #CD0202 0%, #851736 46%, #023297 100%);
  --grad-brand-hv:linear-gradient(118deg, #E00303 0%, #941A3D 46%, #0239AE 100%);
  --grad-chrome:  linear-gradient(145deg, #F2F4F8 0%, #C3CAD8 38%, #8A93A6 56%, #E6EAF1 100%);
  --grad-veil:    linear-gradient(180deg, rgba(8,10,18,.38) 0%, rgba(8,10,18,.86) 62%, #080A12 100%);
  --grad-fade-up: linear-gradient(180deg, rgba(8,10,18,0) 0%, #080A12 100%);

  /* --- Tipografia ---------------------------------------------------
     Jost (revival de Futura) nos títulos: é a classe tipográfica que a
     apresentação institucional da BRAPARK já usa e que acompanha o
     desenho geométrico do logotipo. Inter no corpo, por legibilidade. */
  --font-display: "Jost", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body:    "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --fw-light:     300;
  --fw-regular:   400;
  --fw-medium:    500;
  --fw-semibold:  600;

  --fs-display:   clamp(2.25rem, 1.35rem + 3.9vw, 4rem);     /* 36 → 64 */
  --fs-h2:        clamp(1.75rem, 1.28rem + 2.0vw, 2.75rem);  /* 28 → 44 */
  --fs-h3:        clamp(1.25rem, 1.14rem + 0.5vw, 1.5rem);   /* 20 → 24 */
  --fs-lead:      clamp(1.0625rem, 1.0rem + 0.4vw, 1.25rem); /* 17 → 20 */
  --fs-body:      1.0625rem;                                  /* 17 */
  --fs-small:     0.875rem;                                   /* 14 */
  --fs-micro:     0.75rem;                                    /* 12 */
  --fs-eyebrow:   0.75rem;

  --lh-display:   1.04;
  --lh-h2:        1.12;
  --lh-body:      1.7;
  --ls-display:   -0.02em;
  --ls-eyebrow:   0.22em;

  /* --- Espaçamento (base 8px) -------------------------------------- */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-section: clamp(4.5rem, 2.5rem + 8vw, 7.5rem);

  /* --- Raio --------------------------------------------------------- */
  --radius-sm:   4px;
  --radius-md:   12px;
  --radius-lg:   20px;
  --radius-xl:   28px;
  --radius-full: 999px;

  /* --- Sombra ------------------------------------------------------- */
  --shadow-soft:   0 1px 3px rgba(0, 0, 0, .28);
  --shadow-card:   0 18px 44px -24px rgba(0, 0, 0, .72);
  --shadow-raised: 0 28px 70px -30px rgba(2, 50, 151, .55);
  --shadow-cta:    0 14px 34px -14px rgba(205, 2, 2, .48);

  /* --- Movimento ----------------------------------------------------
     Três curvas, só. Ver guia seção 14. */
  --ease-enter: cubic-bezier(.16, 1, .3, 1);
  --ease-ui:    cubic-bezier(.22, 1, .36, 1);
  --ease-exit:  cubic-bezier(.4, 0, 1, 1);

  --t-micro: 150ms;
  --t-ui:    280ms;
  --t-enter: 520ms;
  --t-hero:  800ms;

  /* --- Layout -------------------------------------------------------- */
  --container:   1200px;
  --measure:     62ch;
  --gutter:      clamp(1.25rem, 0.8rem + 2vw, 2.5rem);
  --header-h:    76px;
  --header-h-sm: 64px;
  --z-header:    900;
  --z-bar:       950;
  --z-widget:    99999;
}