/* ==========================================================================
   VIRETTO — Design System Tokens (v3 — nova paleta 7 cores)
   Hierarquia: Azul 50% · Cru 35% · Cru Quente 8% · Marrom 5% · Preto Sépia/Branco 2%
   Caramelo e Terracota REMOVIDOS da paleta de marca (2026-06-25).
   ========================================================================== */

:root {
  /* ── Paleta Viretto v5 — Azul × Cru (nova identidade 7 cores, 2026-06-25)
     O destaque nasce do contraste azul × cru. Sobre fundo claro: azul é o protagonista.
     Sobre fundo azul: cru-quente é o acento. Caramelo e terracota foram removidos. */
  --viretto-azul:           #2B5A7A;   /* cor da marca + acento (CTA primário, links, destaques) */
  --viretto-azul-profundo:  #1F4660;   /* fundos escuros, footer, hover do CTA */
  --viretto-azul-escuro:    #142F44;   /* footer / extremo */
  --viretto-azul-meio:      #345E7E;
  --viretto-azul-claro:     #4E7B9C;
  --viretto-azul-tinta:     #0C1F2D;

  --viretto-cru:            #F2EBDD;   /* fundo padrão (papel quente) */
  --viretto-cru-quente:     #E8DEC8;  /* blocos secundários + acento sobre fundos azul/escuro */
  --viretto-cru-frio:       #EFE7D5;
  --viretto-cru-papel:      #ECE2CB;
  --viretto-branco:         #FFFFFF;   /* cards, seções de alívio */

  /* Aliases de migração — caramelo e caramelo-claro redirecionam para novos tokens.
     Em contextos escuros (.hero, .section--atlas, .section--azul) override para cru-quente. */
  --viretto-caramelo:       var(--viretto-marrom); /* MIGRADO: strokes, italic → marrom s/ fundo claro */
  --viretto-caramelo-claro: var(--viretto-cru-quente); /* MIGRADO: texto sec. sobre escuro → cru-quente */

  --viretto-marrom:         #6B4F3A;   /* Marrom oficial — texto de corpo, strokes, acentos s/ claro */
  --viretto-marrom-claro:   #7C5C42;
  --viretto-marrom-medio:   #8A6B52;

  /* Aliases de migração — terracota redireciona para azul. */
  --viretto-terracota:      var(--viretto-azul); /* MIGRADO: botões primários, links, CTAs → azul */
  --viretto-terracota-hover:var(--viretto-azul-profundo); /* MIGRADO: hover de botão → azul-profundo */

  --viretto-texto-claro:        #F4EEE3;
  --viretto-texto-claro-suave:  #B8C5D0;

  --viretto-tinta:          #1A1410;
  --viretto-grafite:        #1A1A1A;

  /* ── Aliases legacy (mantém compatibilidade do CSS existente) ──────────── */
  --v-teal:              var(--viretto-azul);
  --v-teal-light:        var(--viretto-azul-claro);
  --v-teal-mid:          var(--viretto-azul);
  --v-teal-vivid:        var(--viretto-azul-claro);
  --v-copper:            var(--viretto-terracota);
  --v-copper-light:      var(--viretto-caramelo);
  --v-copper-hover:      var(--viretto-terracota-hover);
  --v-gold:              var(--viretto-caramelo);
  --v-gold-soft:         var(--viretto-caramelo-claro);

  --v-dark:              var(--viretto-cru);
  --v-dark-card:         var(--viretto-cru-quente);
  --v-dark-elevated:     var(--viretto-cru-quente);
  --v-dark-subtle:       var(--viretto-cru-quente);
  --v-gray-900:          var(--viretto-marrom);
  --v-gray-800:          var(--viretto-marrom);
  --v-gray-700:          var(--viretto-marrom);
  --v-gray-600:          var(--viretto-marrom-claro);
  --v-gray-500:          var(--viretto-marrom-claro);
  --v-gray-400:          var(--viretto-marrom-claro);
  --v-gray-300:          var(--viretto-marrom-claro);
  --v-gray-200:          rgba(107, 79, 58, 0.2);
  --v-gray-100:          rgba(107, 79, 58, 0.08);
  --v-cream:             var(--viretto-cru);
  --v-cream-warm:        var(--viretto-cru-quente);
  --v-white:             var(--viretto-azul);          /* texto "primary" agora vira azul */
  --v-white-pure:        var(--viretto-cru);

  /* ── Semantic ──────────────────────────────────────────────────────────── */
  --v-success:           #2E8B57;
  --v-error:             #C0392B;
  --v-warning:           #C9904F; /* mostarda — cor funcional de aviso, independente da paleta de marca */
  --v-info:              var(--viretto-azul-claro);

  /* ── Surfaces ──────────────────────────────────────────────────────────── */
  --v-bg-primary:        var(--viretto-cru);
  --v-bg-card:           var(--viretto-cru-quente);
  --v-bg-elevated:       var(--viretto-cru-quente);
  --v-bg-overlay:        rgba(43, 90, 122, 0.85);
  --v-bg-light:          var(--viretto-cru);
  --v-bg-light-card:     var(--viretto-cru-quente);

  /* ── Text ──────────────────────────────────────────────────────────────── */
  --v-text-primary:      var(--viretto-azul);
  --v-text-secondary:    var(--viretto-marrom);
  --v-text-tertiary:     var(--viretto-marrom-claro);
  --v-text-dark:         var(--viretto-azul);
  --v-text-dark-secondary: var(--viretto-marrom);
  --v-text-accent:       var(--viretto-azul); /* acento agora é azul */
  --v-text-link:         var(--viretto-azul); /* links → azul (era terracota via alias) */
  --v-text-headline:     var(--viretto-azul);
  --v-text-body:         var(--viretto-marrom);
  --v-text-muted:        var(--viretto-marrom-claro);

  /* ── Typography ────────────────────────────────────────────────────────── */
  --v-font-heading:      'Fraunces', 'Playfair Display', Georgia, serif;
  --v-font-display:      'Fraunces', 'Playfair Display', Georgia, serif;
  --v-font-body:         'Inter', system-ui, -apple-system, sans-serif;
  --v-font-mono:         'JetBrains Mono', 'Fira Code', 'Consolas', monospace;

  --v-fs-display:        clamp(3rem, 6vw, 5.5rem);
  --v-fs-h1:             clamp(2.5rem, 5vw, 4.5rem);
  --v-fs-h2:             clamp(2rem, 4vw, 3.5rem);
  --v-fs-h3:             clamp(1.5rem, 2.5vw, 2rem);
  --v-fs-h4:             clamp(1.15rem, 1.6vw, 1.5rem);
  --v-fs-body-lg:        1.125rem;
  --v-fs-body:           1rem;
  --v-fs-body-sm:        0.875rem;
  --v-fs-caption:        0.8125rem;
  --v-fs-overline:       0.75rem;

  --v-lh-tight:          0.95;
  --v-lh-heading:        1.1;
  --v-lh-body:           1.65;

  --v-ls-tight:          -0.025em;
  --v-ls-normal:         0;
  --v-ls-wide:           0.18em;
  --v-ls-overline:       0.32em;

  /* ── Spacing (mantém escala 8px existente) ─────────────────────────────── */
  --v-space-1:           0.25rem;
  --v-space-2:           0.5rem;
  --v-space-3:           0.75rem;
  --v-space-4:           1rem;
  --v-space-5:           1.5rem;
  --v-space-6:           2rem;
  --v-space-7:           2.5rem;
  --v-space-8:           3rem;
  --v-space-9:           4rem;
  --v-space-10:          5rem;
  --v-space-11:          6rem;
  --v-space-12:          8rem;

  /* ── Layout ────────────────────────────────────────────────────────────── */
  --v-container-max:     1280px;
  --v-container-narrow:  960px;
  --v-container-tight:   720px;
  --v-gutter:            1.5rem;
  --v-section-padding:   var(--v-space-12);

  /* ── Borders ───────────────────────────────────────────────────────────── */
  --v-radius-sm:         4px;
  --v-radius-md:         6px;
  --v-radius-lg:         8px;
  --v-radius-xl:         8px;
  --v-radius-pill:       999px;
  --v-border-subtle:     1px solid rgba(107, 79, 58, 0.12);
  --v-border-light:      1px solid rgba(107, 79, 58, 0.2);
  --v-border-copper:     1px solid rgba(43, 90, 122, 0.3); /* era terracota, agora azul */
  --v-border-azul:       1px solid var(--viretto-azul);

  /* ── Shadows ───────────────────────────────────────────────────────────── */
  --v-shadow-sm:         0 1px 3px rgba(43, 90, 122, 0.08);
  --v-shadow-md:         0 4px 16px rgba(43, 90, 122, 0.10);
  --v-shadow-lg:         0 8px 32px rgba(43, 90, 122, 0.14);
  --v-shadow-xl:         0 16px 48px rgba(43, 90, 122, 0.18);
  --v-shadow-glow-teal:  0 0 40px rgba(43, 90, 122, 0.25);
  --v-shadow-glow-copper:0 0 40px rgba(43, 90, 122, 0.25); /* era caramelo, agora azul */
  --v-shadow-card:       0 2px 12px rgba(43, 90, 122, 0.06);
  --v-shadow-card-hover: 0 8px 32px rgba(43, 90, 122, 0.14);

  /* ── Transitions ───────────────────────────────────────────────────────── */
  --v-ease-out:          cubic-bezier(0.16, 1, 0.3, 1);
  --v-ease-in-out:       cubic-bezier(0.65, 0, 0.35, 1);
  --v-ease-spring:       cubic-bezier(0.34, 1.56, 0.64, 1);
  --v-duration-fast:     150ms;
  --v-duration-normal:   300ms;
  --v-duration-slow:     500ms;
  --v-duration-slower:   800ms;
  --v-transition-base:   all var(--v-duration-normal) var(--v-ease-out);
  --v-transition-fast:   all var(--v-duration-fast) var(--v-ease-out);
  --v-transition-slow:   all var(--v-duration-slow) var(--v-ease-out);

  /* ── Z-Index ───────────────────────────────────────────────────────────── */
  --v-z-base:            1;
  --v-z-dropdown:        100;
  --v-z-sticky:          200;
  --v-z-fixed:           300;
  --v-z-overlay:         400;
  --v-z-modal:           500;
  --v-z-toast:           600;
  --v-z-tooltip:         700;
}

/* ── Variant: seção sobre fundo azul (institucional/quebra editorial) ─────── */
.section--azul {
  --viretto-caramelo:    var(--viretto-cru-quente); /* sobre fundo azul, caramelo → cru-quente */
  --v-bg-primary:        var(--viretto-azul);
  --v-bg-card:           var(--viretto-azul-escuro);
  --v-text-primary:      var(--viretto-cru);
  --v-text-secondary:    var(--viretto-cru-quente);
  --v-text-tertiary:     var(--viretto-cru-quente);
  --v-text-headline:     var(--viretto-cru);
  --v-text-accent:       var(--viretto-cru-quente); /* acento sobre azul = cru-quente */
  --v-border-subtle:     1px solid rgba(232, 222, 200, 0.18); /* era caramelo, agora cru-quente */
}

/* ── Variant: seção sobre fundo marrom (números/investidores) ─────────────── */
.section--marrom {
  --viretto-caramelo:    var(--viretto-cru-quente); /* sobre fundo marrom, caramelo → cru-quente */
  --v-bg-primary:        var(--viretto-marrom);
  --v-bg-card:           var(--viretto-marrom);
  --v-text-primary:      var(--viretto-cru);
  --v-text-secondary:    var(--viretto-cru-quente);
  --v-text-tertiary:     var(--viretto-cru-quente);
  --v-text-headline:     var(--viretto-cru);
  --v-text-accent:       var(--viretto-cru-quente); /* acento sobre marrom = cru-quente */
  --v-border-subtle:     1px solid rgba(232, 222, 200, 0.18); /* era caramelo, agora cru-quente */
}

/* ── Variant: seção cru-quente (variação sutil) ───────────────────────────── */
.section--cru-quente {
  --v-bg-primary:        var(--viretto-cru-quente);
  --v-bg-card:           var(--viretto-cru);
}

/* ── Legacy aliases para .section--light/dark/darker (compatibilidade) ────── */
.section--light,
.section--dark,
.section--darker {
  --v-bg-primary:        var(--viretto-cru-quente);
  --v-bg-card:           var(--viretto-cru);
  --v-text-primary:      var(--viretto-azul);
  --v-text-secondary:    var(--viretto-marrom);
  --v-text-tertiary:     var(--viretto-marrom-claro);
}