/* ============================================================
   ÓTICAS PORTO — Design Tokens
   Sistema visual de uma ótica premium em Porto Alegre.
   Paleta verde garrafa + creme, tipografia editorial em Inter,
   animações sutis inspiradas em Apple, Aesop e Cubitts.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

:root {
  /* ─── CORES PRINCIPAIS ─────────────────────────────────── */
  --green-deep:  #1f3a2b;   /* verde garrafa — textos, CTA, footer, logo */
  --green-mid:   #4a6b54;   /* verde médio — textos secundários, ícones, hover */
  --green-soft:  #c4d4b8;   /* verde claro — mapa, ilustrações */
  --cream:       #f4ecd8;   /* creme — background principal, textos em fundo escuro */
  --cream-dark:  #ede2c8;   /* creme escurecido — profundidade, mapa */
  --gold:        #b89968;   /* dourado — accent no gradient do título */
  --ink:         #2c2c2c;   /* preto neutro — texto de corpo */
  --white:       #ffffff;   /* branco puro — usado APENAS no marquee de marcas */

  /* ─── COR SEMÂNTICA (foreground / background / surface) ─ */
  --bg:          var(--cream);
  --bg-elevated: #ffffff;
  --bg-inverse:  var(--green-deep);

  --fg:          var(--ink);
  --fg-muted:    var(--green-mid);
  --fg-inverse:  var(--cream);

  --border:      rgba(31, 58, 43, 0.12);
  --border-strong: rgba(31, 58, 43, 0.30);
  --border-on-dark: rgba(244, 236, 216, 0.25);

  --accent:      var(--gold);

  /* ─── TIPOGRAFIA — família ─────────────────────────────── */
  --font-sans:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:    'Menlo', 'SF Mono', Consolas, monospace;
  --font-display: var(--font-sans); /* Inter também serve display */

  /* ─── PESOS ─────────────────────────────────────────────── */
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  /* ─── ESCALA TIPOGRÁFICA ───────────────────────────────── */
  --fs-eyebrow:  12px;
  --fs-body-sm:  14px;
  --fs-body:     16px;
  --fs-h3:       clamp(28px, 3vw, 40px);
  --fs-h2:       clamp(36px, 4.5vw, 64px);
  --fs-h1:       clamp(40px, 7.5vw, 100px);

  /* ─── LETTER-SPACING ───────────────────────────────────── */
  --tracking-tight:  -0.04em;   /* H1 grande */
  --tracking-normal: -0.02em;   /* H2, body emphasis */
  --tracking-wide:    0.18em;   /* logo wordmark, eyebrows */
  --tracking-wider:   0.32em;   /* eyebrows muito espaçados */

  /* ─── ALTURA DE LINHA ──────────────────────────────────── */
  --lh-display: 1;
  --lh-tight:   1.05;
  --lh-snug:    1.1;
  --lh-body:    1.6;

  /* ─── ESPAÇAMENTO — 8pt grid ───────────────────────────── */
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-5: 48px;
  --space-6: 64px;
  --space-7: 96px;
  --space-8: 128px;

  /* ─── RAIOS ─────────────────────────────────────────────── */
  --radius-sm:   8px;    /* badges, inputs pequenos */
  --radius-md:  12px;    /* inputs, cards pequenos */
  --radius-lg:  20px;    /* cards de produto */
  --radius-xl:  28px;    /* hero cards, vídeo */
  --radius-pill: 999px;  /* botões, badges */

  /* ─── SOMBRAS ──────────────────────────────────────────── */
  --shadow-sm: 0 8px 24px rgba(31, 58, 43, 0.08);
  --shadow-md: 0 20px 60px rgba(31, 58, 43, 0.15);
  --shadow-lg: 0 30px 80px rgba(31, 58, 43, 0.18);

  /* ─── ANIMAÇÃO ─────────────────────────────────────────── */
  --ease-out:       cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:    cubic-bezier(0.4, 0, 0.2, 1);
  --duration-fast:  0.2s;
  --duration-med:   0.4s;
  --duration-slow:  0.8s;

  /* ─── GRADIENT DE ASSINATURA ───────────────────────────── */
  --gradient-signature: linear-gradient(100deg, #1f3a2b 0%, #4a6b54 30%, #b89968 60%, #2c5240 100%);
}

/* ============================================================
   TIPOGRAFIA SEMÂNTICA — atalhos para uso direto
   ============================================================ */

.h1,
.type-display {
  font-family: var(--font-sans);
  font-size: var(--fs-h1);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-display);
  letter-spacing: var(--tracking-tight);
  text-transform: uppercase;
  color: var(--green-deep);
}

.h2 {
  font-family: var(--font-sans);
  font-size: var(--fs-h2);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-normal);
  text-transform: uppercase;
  color: var(--green-deep);
}

.h3 {
  font-family: var(--font-sans);
  font-size: var(--fs-h3);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-normal);
  color: var(--green-deep);
}

.body {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  line-height: var(--lh-body);
  color: var(--ink);
}

.body-sm {
  font-size: var(--fs-body-sm);
  line-height: 1.5;
  color: var(--green-mid);
}

.eyebrow {
  font-family: var(--font-sans);
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--green-mid);
}

.mono {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--green-mid);
}

/* Gradient de assinatura — aplicado em palavras-chave de headlines */
.gradient-text {
  background: var(--gradient-signature);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: gradientFlow 8s ease-in-out infinite;
}

@keyframes gradientFlow {
  0%, 100% { background-position: 0% center; }
  50%      { background-position: 100% center; }
}