/* ============================================================
   Dra. Karol Thé — Design Tokens
   v1.0 · 21/09/2026 · Verk Digital — Squad de Design
   Fonte canônica de cor: logo vetorizado.
   ============================================================ */

:root {
  /* ---------- Cor: paleta base ---------- */
  --kt-color-brand:            #3D4F3B; /* Verde Marca — cor do logo */
  --kt-color-brand-deep:       #132721; /* Verde Profundo */
  --kt-color-graphite:         #1A1919; /* Grafite */
  --kt-color-sage:             #9FA893; /* Sálvia — decorativo, nunca texto sobre claro */
  --kt-color-sand:             #F7F6F2; /* Areia — fundo dominante */
  --kt-color-sand-mid:         #EBE7E2; /* Areia Média */
  --kt-color-white:            #FFFFFF;

  /* ---------- Cor: semântico ---------- */
  --kt-surface-base:           var(--kt-color-sand);
  --kt-surface-raised:         var(--kt-color-white);
  --kt-surface-muted:          var(--kt-color-sand-mid);
  --kt-surface-inverse:        var(--kt-color-brand-deep);
  --kt-surface-brand:          var(--kt-color-brand);

  --kt-text-primary:           var(--kt-color-brand);
  --kt-text-body:              var(--kt-color-graphite);
  --kt-text-on-brand:          var(--kt-color-sand);
  --kt-text-on-inverse:        var(--kt-color-sand);
  --kt-text-muted:             rgba(26, 25, 25, 0.66);

  --kt-border-subtle:          rgba(159, 168, 147, 0.35);
  --kt-border-strong:          var(--kt-color-brand);
  --kt-focus-ring:             var(--kt-color-brand);

  --kt-decor-gradient:         linear-gradient(147deg, #3D4F3B 40%, #9FA893 100%);

  /* ---------- Tipografia: famílias ---------- */
  --kt-font-display: "Playfair Display", Georgia, "Times New Roman", serif;
  --kt-font-ui:      "Montserrat", -apple-system, "Segoe UI", Roboto, sans-serif;

  /* ---------- Tipografia: escala modular 1.25, base 16px ---------- */
  --kt-size-display:    3.8rem;   /* 61px */
  --kt-size-h1:         3.05rem;  /* 49px */
  --kt-size-h2:         2.44rem;  /* 39px */
  --kt-size-h3:         1.95rem;  /* 31px */
  --kt-size-h4:         1.56rem;  /* 25px */
  --kt-size-body-lg:    1.25rem;  /* 20px */
  --kt-size-body:       1rem;     /* 16px */
  --kt-size-label:      0.75rem;  /* 12px */

  /* ---------- Tipografia: entrelinha ---------- */
  --kt-leading-display: 1.05;
  --kt-leading-h1:      1.1;
  --kt-leading-h2:      1.15;
  --kt-leading-h3:      1.2;
  --kt-leading-h4:      1.3;
  --kt-leading-body:    1.6;
  --kt-leading-label:   1.2;

  /* ---------- Tipografia: tracking (em, nunca px) ---------- */
  --kt-tracking-display: -0.04em;
  --kt-tracking-h1:      -0.035em;
  --kt-tracking-h2:      -0.03em;
  --kt-tracking-h3:      -0.02em;
  --kt-tracking-h4:      -0.01em;
  --kt-tracking-body:    -0.01em;
  --kt-tracking-label:    0.08em;

  /* ---------- Tipografia: pesos ---------- */
  --kt-weight-display:  400;
  --kt-weight-body:     400;
  --kt-weight-medium:   600;
  --kt-weight-bold:     700;

  /* ---------- Espaçamento: base 4px ---------- */
  --kt-space-1:   0.25rem;  /*   4px */
  --kt-space-2:   0.5rem;   /*   8px */
  --kt-space-3:   0.75rem;  /*  12px */
  --kt-space-4:   1rem;     /*  16px */
  --kt-space-6:   1.5rem;   /*  24px */
  --kt-space-8:   2rem;     /*  32px */
  --kt-space-12:  3rem;     /*  48px */
  --kt-space-16:  4rem;     /*  64px */
  --kt-space-24:  6rem;     /*  96px */
  --kt-space-32:  8rem;     /* 128px */

  /* ---------- Forma ---------- */
  --kt-radius-sm:   6px;
  --kt-radius-md:   18px;
  --kt-radius-lg:   24px;
  --kt-radius-full: 999px;
  --kt-border-width: 1px;

  /* ---------- Layout ---------- */
  --kt-container: 1140px;
  --kt-gutter:    var(--kt-space-6);

  /* ---------- Movimento ---------- */
  --kt-duration: 200ms;
  --kt-easing:   cubic-bezier(0.4, 0, 0.2, 1);
}

/* Tipografia em telas pequenas — o corpo NÃO reduz (público 40+). */
@media (max-width: 767px) {
  :root {
    --kt-size-display: 2.44rem; /* 39px */
    --kt-size-h1:      1.95rem; /* 31px */
    --kt-size-h2:      1.56rem; /* 25px */
    --kt-size-h3:      1.25rem; /* 20px */
    --kt-gutter:       var(--kt-space-4);
  }
}