/* ============================================================
   GRUPO VILLA SÊNIOR — Design System v0.1
   Tokens base. Fonte da verdade das cores: logos oficiais
   (SVG/PNG em "Logos e Selos"). Não inventar hex fora daqui.
   ============================================================ */

:root {
  /* ---------- 1. PALETA DE MARCA ---------- */
  /* grupo — base #688674 */
  --c-grupo-50: #F6F8F7;
  --c-grupo-100: #EBEFED;
  --c-grupo-200: #D7E0DA;
  --c-grupo-300: #BACAC0;
  --c-grupo-400: #688674;
  --c-grupo-500: #556E5F;
  --c-grupo-600: #45584D;
  --c-grupo-700: #36463C;
  --c-grupo-800: #28332C;
  --c-grupo-900: #1B231E;
  --c-grupo-ink: #617D6C;  /* AA 4.5:1 sobre branco */

  /* lime — base #DAF4A4 */
  --c-lime-50: #F9FDF1;
  --c-lime-100: #F2FBDF;
  --c-lime-200: #E5F7BF;
  --c-lime-300: #D3F292;
  --c-lime-400: #DAF4A4;
  --c-lime-500: #BFEC62;
  --c-lime-600: #A8E528;
  --c-lime-700: #87BD17;
  --c-lime-800: #638A11;
  --c-lime-900: #445F0B;
  --c-lime-ink: #5C8110;  /* AA 4.5:1 sobre branco */

  /* buriti — base #EF9022 */
  --c-buriti-50: #FEF8F1;
  --c-buriti-100: #FCEEDE;
  --c-buriti-200: #FADEBD;
  --c-buriti-300: #F6C68E;
  --c-buriti-400: #EF9022;
  --c-buriti-500: #D1770F;
  --c-buriti-600: #A8600C;
  --c-buriti-700: #844B0A;
  --c-buriti-800: #613707;
  --c-buriti-900: #422605;
  --c-buriti-ink: #AF640D;  /* AA 4.5:1 sobre branco */

  /* despertar — base #36BEEF */
  --c-despertar-50: #F1FAFE;
  --c-despertar-100: #DEF4FC;
  --c-despertar-200: #BDEAFA;
  --c-despertar-300: #8EDAF6;
  --c-despertar-400: #36BEEF;
  --c-despertar-500: #12A8DF;
  --c-despertar-600: #0E87B3;
  --c-despertar-700: #0B6B8D;
  --c-despertar-800: #084E67;
  --c-despertar-900: #063547;
  --c-despertar-ink: #0D7FA7;  /* AA 4.5:1 sobre branco */

  /* provence — base #BC3AC6 (mediana da rosa em PROVENCE 3D.png) */
  --c-provence-50: #FBF3FC;
  --c-provence-100: #F6E3F7;
  --c-provence-200: #ECC8EF;
  --c-provence-300: #DFA0E4;
  --c-provence-400: #BC3AC6;
  --c-provence-500: #9B2FA3;
  --c-provence-600: #7C2683;
  --c-provence-700: #621E67;
  --c-provence-800: #48164B;
  --c-provence-900: #310F34;
  --c-provence-ink: #830CC4;  /* roxo definido pelo cliente — 7.46:1 sobre branco */

  /* toscana — base #B2EF22 */
  --c-toscana-50: #FAFEF1;
  --c-toscana-100: #F3FCDE;
  --c-toscana-200: #E8FABD;
  --c-toscana-300: #D7F68E;
  --c-toscana-400: #B2EF22;
  --c-toscana-500: #97D10F;
  --c-toscana-600: #7AA80C;
  --c-toscana-700: #60840A;
  --c-toscana-800: #466107;
  --c-toscana-900: #304205;
  --c-toscana-ink: #5D8109;  /* AA 4.5:1 sobre branco */

  /* solar — base #EFD022 */
  --c-solar-50: #FEFCF1;
  --c-solar-100: #FCF8DE;
  --c-solar-200: #FAF0BD;
  --c-solar-300: #F6E68E;
  --c-solar-400: #EFD022;
  --c-solar-500: #D1B30F;
  --c-solar-600: #A8900C;
  --c-solar-700: #84720A;
  --c-solar-800: #615307;
  --c-solar-900: #423905;
  --c-solar-ink: #89750A;  /* AA 4.5:1 sobre branco */

  /* galho — base #7A5946 */
  --c-galho-50: #F9F7F5;
  --c-galho-100: #F2ECE8;
  --c-galho-200: #E5D9D2;
  --c-galho-300: #D2BDB1;
  --c-galho-400: #7A5946;
  --c-galho-500: #644939;
  --c-galho-600: #513B2E;
  --c-galho-700: #3F2E24;
  --c-galho-800: #2E221B;
  --c-galho-900: #201712;
  --c-galho-ink: #7A5946;  /* AA 4.5:1 sobre branco */
  /* apoio institucional — medidos nos slogans oficiais */
  --c-agua:   #B2CFCA;   /* "azul claro" da marca — verde-água acinzentado */
  --c-marrom: #89765F;   /* marrom institucional (o galho das logos 3D é #7A5946) */

  /* ---------- 2. NEUTROS ---------- */
  --c-ink-900: #141815;   /* texto principal */
  --c-ink-700: #37423B;   /* texto secundário */
  --c-ink-500: #5F6B64;   /* texto de apoio / legendas */
  --c-ink-300: #A8B2AC;   /* placeholders, divisores fortes */
  --c-line:    #E3E8E5;   /* divisores */
  --c-bg:      #FFFFFF;
  --c-bg-soft: #F6F8F7;   /* seções alternadas */
  --c-bg-deep: #28332C;   /* seções escuras (grupo-800) */

  /* ---------- 3. SEMÂNTICOS (trocados por unidade) ---------- */
  --brand:        var(--c-grupo-400);
  --brand-ink:    var(--c-grupo-ink);   /* texto/ícone sobre branco */
  --brand-deep:   #5A7765;              /* botões — verde com 4.9:1 sobre branco */
  --brand-tint:   var(--c-grupo-100);   /* fundos suaves */
  --brand-accent: var(--c-lime-400);    /* detalhe/realce */
  --brand-rgb:    104 134 116;          /* p/ rgb(var(--brand-rgb) / .12) */

  /* ---------- 4. TIPOGRAFIA ---------- */
  --font-display: "Outfit", "Numans", system-ui, sans-serif;
  --font-text:    "Inter", "Almarai", system-ui, sans-serif;

  /* escala fluida — mín. 18px de corpo (público 60+ e famílias 40-60) */
  --t-hero:  clamp(2.75rem, 1.6rem + 4.6vw, 5.25rem);  /* 44 → 84 */
  --t-h1:    clamp(2.25rem, 1.5rem + 3.0vw, 3.5rem);   /* 36 → 56 */
  --t-h2:    clamp(1.75rem, 1.3rem + 1.9vw, 2.5rem);   /* 28 → 40 */
  --t-h3:    clamp(1.375rem, 1.2rem + 0.8vw, 1.75rem); /* 22 → 28 */
  --t-lead:  clamp(1.125rem, 1.05rem + 0.5vw, 1.375rem);/* 18 → 22 */
  --t-body:  1.125rem;   /* 18px */
  --t-small: 1rem;       /* 16px — mínimo absoluto */
  --t-micro: 0.8125rem;  /* 13px — só rótulos/eyebrow */

  --lh-tight: 1.08;  --lh-head: 1.18;  --lh-body: 1.65;
  --ls-hero: -0.025em;  --ls-head: -0.015em;  --ls-eyebrow: 0.14em;

  /* ---------- 5. ESPAÇAMENTO (base 8) ---------- */
  --sp-1: .25rem; --sp-2: .5rem;  --sp-3: .75rem; --sp-4: 1rem;
  --sp-5: 1.25rem;
  --sp-6: 1.5rem; --sp-8: 2rem;   --sp-12: 3rem;  --sp-16: 4rem;
  --sp-24: 6rem;  --sp-32: 8rem;
  --section-y: clamp(4rem, 2rem + 7vw, 9rem);
  --container: 1200px;
  --container-wide: 1440px;
  --gutter: clamp(1.25rem, 4vw, 3rem);

  /* ---------- 6. RAIOS ---------- */
  --r-sm: 10px; --r-md: 16px; --r-lg: 24px; --r-xl: 32px;
  --r-2xl: 44px;         /* cards grandes / heros — assinatura da marca */
  --r-pill: 999px;

  /* ---------- 7. GLASS (assinatura do site novo) ---------- */
  --glass-bg:        rgb(255 255 255 / .55);
  --glass-bg-strong: rgb(255 255 255 / .75);
  --glass-bg-dark:   rgb(20 24 21 / .38);
  --glass-border:    rgb(255 255 255 / .55);
  --glass-border-dk: rgb(255 255 255 / .16);
  --glass-blur:      18px;
  --glass-blur-lg:   32px;
  --glass-sat:       160%;
  /* véu tonal por unidade: rgb(var(--brand-rgb) / .10) por cima do vidro */
  --glass-tint: rgb(var(--brand-rgb) / .10);

  /* ---------- 8. SOMBRAS ---------- */
  --sh-sm: 0 1px 2px rgb(20 24 21 / .05), 0 2px 8px rgb(20 24 21 / .04);
  --sh-md: 0 2px 4px rgb(20 24 21 / .04), 0 12px 28px rgb(20 24 21 / .08);
  --sh-lg: 0 4px 8px rgb(20 24 21 / .04), 0 24px 60px rgb(20 24 21 / .12);
  --sh-glass: 0 8px 32px rgb(20 24 21 / .10), inset 0 1px 0 rgb(255 255 255 / .6);
  --sh-brand: 0 12px 32px rgb(var(--brand-rgb) / .28);

  /* ---------- 9. MOVIMENTO ---------- */
  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out-soft: cubic-bezier(.16,1,.3,1);
  --dur-fast: 180ms; --dur: 320ms; --dur-slow: 620ms;

  /* ---------- 10. FOCO (acessibilidade) ---------- */
  --focus-ring: 0 0 0 3px #fff, 0 0 0 6px var(--brand-ink);
}

/* ============================================================
   TEMAS POR UNIDADE — aplicar no <body> ou wrapper da página
   ============================================================ */
[data-villa="buriti"] {
  --brand: var(--c-buriti-400); --brand-ink: var(--c-buriti-ink);
  --brand-deep: var(--c-buriti-700); --brand-tint: var(--c-buriti-100);
  --brand-accent: var(--c-buriti-300); --brand-rgb: 239 144 34;
}
[data-villa="despertar"] {
  --brand: var(--c-despertar-400); --brand-ink: var(--c-despertar-ink);
  --brand-deep: var(--c-despertar-700); --brand-tint: var(--c-despertar-100);
  --brand-accent: var(--c-despertar-300); --brand-rgb: 54 190 239;
}
[data-villa="provence"] {
  --brand: var(--c-provence-400); --brand-ink: var(--c-provence-ink);
  --brand-deep: #6A0A9E; --brand-tint: var(--c-provence-100);
  --brand-accent: var(--c-provence-300); --brand-rgb: 188 58 198;
}
[data-villa="toscana"] {
  --brand: var(--c-toscana-400); --brand-ink: var(--c-toscana-ink);
  --brand-deep: var(--c-toscana-700); --brand-tint: var(--c-toscana-100);
  --brand-accent: var(--c-toscana-300); --brand-rgb: 178 239 34;
}
[data-villa="solar"] {
  --brand: var(--c-solar-400); --brand-ink: var(--c-solar-ink);
  --brand-deep: var(--c-solar-700); --brand-tint: var(--c-solar-100);
  --brand-accent: var(--c-solar-300); --brand-rgb: 239 208 34;
}

/* ============================================================
   PRIMITIVAS
   ============================================================ */
.glass {
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  border: 1px solid var(--glass-border);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-glass);
}
.glass--tinted { background: linear-gradient(var(--glass-tint), var(--glass-tint)), var(--glass-bg); }
.glass--dark {
  background: var(--glass-bg-dark); border-color: var(--glass-border-dk); color: #fff;
}
/* Fallback obrigatório: sem backdrop-filter, opacidade sobe p/ manter contraste */
@supports not (backdrop-filter: blur(2px)) {
  .glass { background: rgb(255 255 255 / .92); }
  .glass--dark { background: rgb(20 24 21 / .82); }
}
@media (prefers-reduced-transparency: reduce) {
  .glass { background: rgb(255 255 255 / .96); backdrop-filter: none; }
  .glass--dark { background: rgb(20 24 21 / .9); backdrop-filter: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}