@charset "UTF-8";

/* ==========================================================================
   BKM - Design Tokens
   Tema filho: BKM-child
   Carregado antes de custom.css

   Fonte: Figma "Site BKM" (página Theme + variáveis locais + frames
   01-home / 04-sobre-a-bkm). Nomes de cor seguem as variáveis do arquivo.
   ========================================================================== */

:root {
  /* —— 1.1 Cores – variáveis do Figma —— */
  --color-serene-blue: #5293F9;      /* CTA primário, links, destaques */
  --color-deep-navy-blue: #1D2E5C;   /* Títulos, header, hero escuro */
  --color-white: #FFFFFF;
  --color-soft-rose: #DEAFA1;        /* Destaque da fonte script no hero */
  --color-terracotta: #C67355;       /* CTA secundário (ex.: Ver empreendimentos) */
  --color-gray: #43464B;             /* Texto de apoio */
  --color-lightgray: #F8F8F8;        /* Fundo claro de seção */
  --color-midnight-blue: #02101C;    /* Footer / fundos mais escuros */
  --color-plum-purple: #863D8F;      /* CTA de conversão, Missão/Visão */
  --color-light-gray: #F5F5F5;       /* Cards, inputs */
  --color-pale-gray: #F0F0F0;        /* Bordas suaves (plantas, thumbs) */
  --color-mist-green: #E8EED2;
  --color-sage-green: #CCD3A7;        /* Eyebrow / script sobre fundo escuro */
  --color-mist-gray: #CECECC;        /* Bordas, textos secundários no footer */
  --color-abyss: #031728;            /* Badge social do footer */
  --color-primary: #262960;          /* Primary (Figma) */

  /* —— 1.2 Cores – logo BKM (gradiente do símbolo) —— */
  --color-sky-cyan: #0FC5FF;
  --color-bright-cyan: #08B0FE;      /* Overlay MCMV */
  --color-azure: #0094FE;
  --color-cobalt: #1459C3;

  /* —— 1.3 Cores – stops do radial-gradient do Hero —— */
  --color-medium-blue: #457AD2;      /* 25% */
  --color-royal-blue: #3861AB;       /* 50% */
  --color-indigo-blue: #2A4783;      /* 75% */

  /* —— 1.4 Cores – utilitários de UI —— */
  --color-whatsapp: #1DAD38;      /* Botão flutuante Figma 131:368 */
  --overlay-serene-blue: rgba(82, 147, 249, 0.85);
  --overlay-mcmv-cyan: rgba(8, 176, 254, 0.4);
  --overlay-white-10: rgba(255, 255, 255, 0.1);
  --overlay-white-12: rgba(255, 255, 255, 0.12);
  --overlay-white-15: rgba(255, 255, 255, 0.15);
  --overlay-white-20: rgba(255, 255, 255, 0.2);
  --overlay-navy-16: rgba(29, 46, 92, 0.16);
  --overlay-navy-20: rgba(29, 46, 92, 0.2);
  --overlay-navy-30: rgba(29, 46, 92, 0.3);
  --overlay-navy-40: rgba(29, 46, 92, 0.4);
  --overlay-navy-80: rgba(29, 46, 92, 0.8);
  --overlay-navy-92: rgba(29, 46, 92, 0.92);
  --overlay-cobalt-85: rgba(20, 89, 195, 0.85);
  --overlay-black-20: rgba(0, 0, 0, 0.2);
  --overlay-black-50: rgba(10, 8, 4, 0.5);
  --overlay-search: rgba(7, 17, 45, 0.1);
  --overlay-serene-blue-40: rgba(82, 147, 249, 0.4);
  --overlay-plum-40: rgba(134, 61, 143, 0.4);
  --overlay-terracotta-40: rgba(198, 115, 85, 0.4);
  --overlay-sage-40: rgba(204, 211, 167, 0.4);

  /* —— 1.5 Gradientes —— */
  --gradient-hero: radial-gradient(
    140% 140% at 25% 15%,
    var(--color-serene-blue) 0%,
    var(--color-medium-blue) 25%,
    var(--color-royal-blue) 50%,
    var(--color-indigo-blue) 75%,
    var(--color-deep-navy-blue) 100%
  );
  --gradient-brand-moremais: linear-gradient(
    63deg,
    var(--color-deep-navy-blue) 13%,
    var(--color-serene-blue) 133%
  );
  --gradient-mcmv: linear-gradient(
    83deg,
    var(--overlay-mcmv-cyan) 22%,
    var(--overlay-navy-80) 48%,
    var(--color-deep-navy-blue) 100%
  );
  --gradient-experiencia: linear-gradient(
    62deg,
    var(--color-deep-navy-blue) 13%,
    var(--color-serene-blue) 133%
  );
  --gradient-logo: linear-gradient(
    180deg,
    var(--color-sky-cyan) 0%,
    var(--color-bright-cyan) 19%,
    var(--color-azure) 48%,
    var(--color-cobalt) 100%
  );

  /* —— 1.6 Sombras —— */
  --shadow-card: 0 14px 50px -20px var(--overlay-navy-16);
  --shadow-search: 0 15px 45px var(--overlay-search);
  --shadow-whatsapp: 0 5px 7px rgba(128, 178, 66, 0.3);

  /* —— 1.7 Layout —— */
  --container-max-width: 1200px;
  --layout-content-width: var(--container-max-width);
  --layout-content-pad-x: 0px;
  --header-z-index: 99999;
  --header-scroll-offset: 100px;
  --secondary-menu-height: 0px;
  --primary-menu-height: 0px;

  /* —— 1.8 Espaçamento —— */
  --space-5: 5px;
  --space-10: 10px;
  --space-15: 15px;
  --space-20: 20px;
  --space-25: 25px;
  --space-30: 30px;
  --space-35: 35px;
  --space-40: 40px;
  --space-45: 45px;
  --space-50: 50px;
  --space-55: 55px;
  --space-60: 60px;
  --space-65: 65px;
  --space-70: 70px;
  --space-75: 75px;
  --space-80: 80px;
  --space-85: 85px;
  --space-90: 90px;
  --space-95: 95px;
  --space-100: 100px;

  /* —— 1.9 Border radius —— */
  --border-radius-5: 5px;
  --border-radius-10: 10px;
  --border-radius-15: 15px;
  --border-radius-20: 20px;
  --border-radius-25: 25px;
  --border-radius-30: 30px;
  --border-radius-35: 35px;
  --border-radius-40: 40px;
  --border-radius-45: 45px;
  --border-radius-50: 50px;
  --border-radius-pill: 999px;

  /* —— 1.10 Tipografia – famílias (Figma) —— */
  --font-family-albert-sans: "Albert Sans", Helvetica, Arial, sans-serif;
  --font-family-script: "Nothing You Could Do", cursive;

  /* —— 1.11 Tipografia – pesos (Albert Sans no Figma) —— */
  --font-weight-extra-light: 200;  /* Títulos grandes (Hero, Feature) */
  --font-weight-light: 300;        /* Feature, Base, Subtitle, botões */
  --font-weight-regular: 400;      /* Script + texto padrão */
  --font-weight-medium: 500;       /* Nav, labels */
  --font-weight-semibold: 600;     /* Eyebrows / tags em caixa alta */
  --font-weight-bold: 700;         /* Títulos de cards, trechos em destaque */
  --font-weight-extra-bold: 800;   /* Títulos de cards, trechos em destaque */

  /* —— 1.12 Tipografia – escala desktop —— */
  --font-size-hero: 72px;          /* Hero H1 */
  --font-size-hero-tablet: 48px;   /* Hero ≤ 981px */
  --font-size-manifest: 62px;      /* Feature titles (quase toda seção) */
  --font-size-listing: 42px;      /* Títulos das grades de empreendimentos */
  --font-size-feature: 24px;       /* Hero subtitle (Figma Feature) */
  --font-size-subhead: 30px;       /* Subtítulo 30px (Figma Subtitle) */
  --font-size-title: 22px;
  --font-size-subtitle: 20px;
  --font-size-base: 16px;
  --font-size-medium: 14px;
  --font-size-small: 12px;
  --font-size-tiny: 10px;

  /* —— 1.13 Tipografia – line-height —— */
  --line-height-90: 90%;           /* Hero / títulos extra-light */
  --line-height-100: 100%;
  --line-height-110: 110%;
  --line-height-120: 120%;
  --line-height-130: 130%;
  --line-height-140: 140%;
  --line-height-150: 150%;

  /* —— 1.14 Tipografia – letter-spacing (Figma: ~-1% do tamanho) —— */
  --letter-spacing-hero: -0.72px;
  --letter-spacing-listing: -0.42px;
  --letter-spacing-subhead: -0.3px;
  --letter-spacing-subtitle: -0.24px;
  --letter-spacing-base: -0.16px;
  --letter-spacing-medium: -0.14px;
  --letter-spacing-small: -0.12px;
  --letter-spacing-label: 0.05em;

  /* —— 1.15 Transições —— */
  --transition-default: 0.3s ease;
  --ease-expo-out: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-header-in: 1s;
  --duration-nav-expand: 0.65s;
  --duration-reveal: 1.15s;
  --reveal-distance: 72px;
  --reveal-blur: 10px;
}