/* ============================================================================
   tne-base.css — Design Tokens & Foundation
   DistribuidorTopBioEuropa | Site institucional B2B

   Carregado DEPOIS do base.css do Dawn no theme.liquid. Define a camada
   visual da marca TopBioEuropa (cor, tipografia, espaco, bordas, sombras)
   e estilos base minimos sem entrar em conflito com o Dawn.
   ============================================================================ */

/* ----------------------------------------------------------------------------
   1. Variaveis CSS — Paleta oficial TopBioEuropa
   ---------------------------------------------------------------------------- */
:root {
  /* Cores primarias (verde) */
  --tne-green: #004A3C;
  --tne-green-dark: #002E26;
  --tne-green-hover: #005C4B;

  /* Cores acento (dourado) */
  --tne-gold: #CA9649;
  --tne-gold-light: #E8B96A;

  /* Tons creme (fundos suaves) */
  --tne-cream: #E8E0CD;
  --tne-cream-light: #F5F2EB;

  /* Texto */
  --tne-text: #1A1A1A;
  --tne-text-muted: #5A5A5A;
  --tne-text-subtle: #8A8A8A;

  /* Branco base */
  --tne-white: #FFFFFF;
}

/* ----------------------------------------------------------------------------
   2. Variaveis CSS — Tipografia
   Familia principal: Archivo (Google Fonts, carregada no theme.liquid)
   Familia emocional: Palatino Linotype (font de sistema, sem download)
   ---------------------------------------------------------------------------- */
:root {
  --tne-font-primary: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --tne-font-accent: 'Palatino Linotype', Palatino, 'Book Antiqua', Georgia, serif;

  /* Escalas tipograficas (responsivas via clamp) */
  --tne-h1: clamp(2.5rem, 5vw, 4.25rem);    /* 40 -> 68 px */
  --tne-h2: clamp(2rem, 4vw, 3rem);          /* 32 -> 48 px */
  --tne-h3: clamp(1.5rem, 3vw, 2.25rem);     /* 24 -> 36 px */
  --tne-h4: clamp(1.25rem, 2vw, 1.625rem);   /* 20 -> 26 px */
  --tne-body: 1rem;                           /* 16 px */
  --tne-small: 0.875rem;                      /* 14 px */

  /* Pesos */
  --tne-weight-regular: 400;
  --tne-weight-semibold: 600;
  --tne-weight-bold: 700;
  --tne-weight-extrabold: 800;
}

/* ----------------------------------------------------------------------------
   3. Variaveis CSS — Espacamento (sistema 8pt)
   ---------------------------------------------------------------------------- */
:root {
  --tne-space-xs: 8px;
  --tne-space-sm: 16px;
  --tne-space-md: 24px;
  --tne-space-lg: 32px;
  --tne-space-xl: 48px;
  --tne-space-2xl: 64px;
  --tne-space-3xl: 96px;
}

/* ----------------------------------------------------------------------------
   4. Variaveis CSS — Bordas, raios, sombras e easing
   ─────────────────────────────────────────────────────────────────────
   Sombras tintadas em direccao a green-dark (RGB 0, 30, 24) — banidas
   sombras genericas rgba(0, 0, 0, X). Cada sombra deve "pertencer" a
   marca, nao parecer um default de framework.
   Easing custom — banido `ease`, `ease-in-out`, `linear` standard. As
   curvas escolhidas (Apple/Linear curve + smoother out) dao sensacao
   premium e coesa entre seccoes.
   ─────────────────────────────────────────────────────────────────────
   ---------------------------------------------------------------------------- */
:root {
  --tne-radius-sm:   4px;
  --tne-radius-md:   8px;
  --tne-radius-lg:   16px;
  --tne-radius-xl:   22px;   /* squircle premium para cards de destaque */
  --tne-radius-pill: 999px;

  /* Drop shadows tintadas em direccao a green-dark. */
  --tne-shadow-sm:   0 2px 4px    rgba(0, 30, 24, 0.08);
  --tne-shadow-md:   0 8px 24px  -8px  rgba(0, 30, 24, 0.35);
  --tne-shadow-lg:   0 24px 56px -24px rgba(0, 30, 24, 0.55);
  --tne-shadow-gold: 0 4px 16px   rgba(202, 150, 73, 0.30);

  /* Sombra para cards premium (Double-Bezel). Combina:
       1) drop shadow tintada green-dark
       2) inner highlight no topo (luz)
       3) hairline ring dourado interno (definicao de bordo)
     Usar em cards de destaque (tne-dep-card, tne-caso-card, etc). */
  --tne-shadow-card-premium:
    0 24px 56px -24px rgba(0, 30, 24, 0.55),
    0 1px 0 rgba(255, 255, 255, 0.06) inset,
    0 0 0 1px rgba(202, 150, 73, 0.12) inset;

  /* Variante para cards sobre fundo claro (cream): hairline verde subtil. */
  --tne-shadow-card-light:
    0 24px 56px -24px rgba(0, 30, 24, 0.18),
    0 1px 0 rgba(255, 255, 255, 0.7) inset,
    0 0 0 1px rgba(0, 74, 60, 0.06) inset;

  /* Easing tokens — substituem `ease`, `ease-out`, etc. */
  --tne-ease-default: cubic-bezier(0.32, 0.72, 0, 1);   /* Apple/Linear curve */
  --tne-ease-soft:    cubic-bezier(0.16, 1, 0.3, 1);     /* smoother decay */
  --tne-ease-snappy:  cubic-bezier(0.4, 0, 0.2, 1);      /* Material standard */

  /* Duracoes recomendadas — usar com os easing tokens acima. */
  --tne-duration-quick:  220ms;  /* hover, micro-interactions */
  --tne-duration-normal: 400ms;  /* state changes */
  --tne-duration-slow:   600ms;  /* card transforms, parallax */
}

/* ----------------------------------------------------------------------------
   5. Estilos base
   Aplicam-se DEPOIS do Dawn. Tipografia hierarquica + utilities essenciais.
   ---------------------------------------------------------------------------- */

/* Body — tipografia base TopBioEuropa (sobrepoe Dawn quando carregado depois). */
body {
  font-family: var(--tne-font-primary);
  font-weight: var(--tne-weight-regular);
  color: var(--tne-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Hierarquia tipografica oficial. */
h1,
.tne-h1 {
  font-family: var(--tne-font-primary);
  font-size: var(--tne-h1);
  font-weight: var(--tne-weight-extrabold);
  font-stretch: 125%; /* Archivo Expanded ExtraBold */
  line-height: 1.1;
  color: var(--tne-text);
  margin: 0 0 var(--tne-space-md);
}

h2,
.tne-h2 {
  font-family: var(--tne-font-primary);
  font-size: var(--tne-h2);
  font-weight: var(--tne-weight-bold);
  line-height: 1.2;
  color: var(--tne-text);
  margin: 0 0 var(--tne-space-sm);
}

h3,
.tne-h3 {
  font-family: var(--tne-font-primary);
  font-size: var(--tne-h3);
  font-weight: var(--tne-weight-bold);
  line-height: 1.3;
  color: var(--tne-text);
  margin: 0 0 var(--tne-space-sm);
}

h4,
.tne-h4 {
  font-family: var(--tne-font-primary);
  font-size: var(--tne-h4);
  font-weight: var(--tne-weight-semibold);
  line-height: 1.4;
  color: var(--tne-text);
  margin: 0 0 var(--tne-space-xs);
}

/* Frase emocional — Palatino italico dourado.
   Uso EXCLUSIVO em pontos poeticos da copy
   (ex: "Beleza que vem do cuidado com voce."). */
.tne-palatino {
  font-family: var(--tne-font-accent);
  font-style: italic;
  color: var(--tne-gold);
  font-weight: var(--tne-weight-regular);
}

/* Section eyebrow — etiqueta dourada com linha antes do titulo da seccao. */
.tne-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--tne-space-sm);
  font-family: var(--tne-font-primary);
  font-size: 13px;
  font-weight: var(--tne-weight-extrabold);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--tne-gold-light);
  margin: 0 0 var(--tne-space-sm);
}

.tne-eyebrow::before {
  content: '';
  display: inline-block;
  width: 32px;
  height: 2px;
  background-color: var(--tne-gold);
  flex-shrink: 0;
}

/* Container central — max 1280px com padding lateral responsivo. */
.tne-container {
  width: 100%;
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--tne-space-md);
  padding-right: var(--tne-space-md);
}

@media (min-width: 768px) {
  .tne-container {
    padding-left: var(--tne-space-lg);
    padding-right: var(--tne-space-lg);
  }
}

/* Padding vertical standard de seccoes — 96px desktop, 64px mobile. */
.tne-section-padding {
  padding-top: var(--tne-space-3xl);
  padding-bottom: var(--tne-space-3xl);
}

@media (max-width: 767px) {
  .tne-section-padding {
    padding-top: var(--tne-space-2xl);
    padding-bottom: var(--tne-space-2xl);
  }
}

/* ----------------------------------------------------------------------------
   6. Acessibilidade — focus visível, reduced motion, skip link
   Foco sempre visível para navegação por teclado (WCAG 2.4.7).
   Cor dourada com offset garante 3:1 contra qualquer fundo da paleta.
   ---------------------------------------------------------------------------- */
*:focus-visible {
  outline: 2px solid var(--tne-gold);
  outline-offset: 2px;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--tne-gold);
  outline-offset: 2px;
  border-radius: var(--tne-radius-sm);
}

/* Skip link — off-screen até receber foco por teclado. */
.tne-skip-link {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 9999;
  padding: 12px 20px;
  background-color: var(--tne-green);
  color: var(--tne-white);
  font-family: var(--tne-font-primary);
  font-size: 14px;
  font-weight: var(--tne-weight-semibold);
  text-decoration: none;
  border-radius: 0 0 var(--tne-radius-md) 0;
  transform: translateY(-100%);
  transition: transform var(--tne-duration-quick) var(--tne-ease-default);
}

.tne-skip-link:focus,
.tne-skip-link:focus-visible {
  transform: translateY(0);
  outline: 2px solid var(--tne-gold);
  outline-offset: -2px;
}

/* Redução de movimento — desliga animações para utilizadores sensíveis. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .tne-loader {
    display: none !important;
  }
}