/* ============================================================
   VOGEL DIGITAL — DESIGN TOKENS  ·  v2.0
   Fonte única de verdade para cor, tipografia, espaço e forma.
   Nada no site, deck ou peça social deve usar valor hard-coded.

   ⚠️ REBRANDING DE 01/AGO/2026 — decisão do Victor.
   O sistema índigo (#3533CD) foi APOSENTADO. Substituído por
   preto profundo + verde-lima. Referência de direção:
   squads100.com/ia (sistema) + talithabroud.framer.website
   (layout e movimento).

   O que morreu: índigo #3533CD, gradiente preto→índigo,
   Jost, Inter. Arquivo antigo em _indigo-2026-07/.
   ============================================================ */

:root {
  /* ---------- PRIMITIVOS: LIMA (cor de marca e de ação) ----------
     Resolve o buraco do sistema anterior: o índigo reprovava como
     texto sobre preto (2,5:1). O lima dá 16,85:1. */
  --vd-lime-50:  #FBFFE6;
  --vd-lime-100: #F5FFC2;
  --vd-lime-200: #EBFF8F;
  --vd-lime-300: #E0FF5C;
  --vd-lime-400: #D6FF29;
  --vd-lime-500: #CCFF00;  /* ★ COR DE MARCA */
  --vd-lime-600: #A3CC00;
  --vd-lime-700: #7A9900;
  --vd-lime-800: #526600;
  --vd-lime-900: #293300;

  /* ---------- PRIMITIVOS: NEUTROS (quentes-neutros, sem matiz) ---------- */
  --vd-neutral-0:    #FFFFFF;
  --vd-neutral-50:   #FAFAFA;  /* ★ texto principal no escuro */
  --vd-neutral-100:  #F0F0F0;
  --vd-neutral-200:  #DDDDDD;
  --vd-neutral-300:  #BBBBBB;
  --vd-neutral-400:  #888888;  /* ★ texto secundário no escuro (5,6:1) */
  --vd-neutral-500:  #666666;
  --vd-neutral-600:  #555555;
  --vd-neutral-700:  #333333;
  --vd-neutral-800:  #222222;
  --vd-neutral-900:  #1A1A1A;
  --vd-neutral-950:  #111111;
  --vd-neutral-1000: #0A0A0A;  /* ★ FUNDO DE MARCA */

  /* ---------- ESTADO ---------- */
  --vd-danger:  #FF3D00;   /* usado também como cor de "problema/antes" */
  --vd-success: #00D084;
  --vd-warning: #FFB800;
  --vd-info:    #88CCFF;

  /* ---------- SUPERFÍCIES E EFEITO ---------- */
  --vd-glow-lime: 0 0 40px rgba(204,255,0,.22);
  --vd-gradient-lime: linear-gradient(135deg, #CCFF00 0%, #A3CC00 100%);
  --vd-gradient-fade: linear-gradient(180deg, rgba(10,10,10,0) 0%, #0A0A0A 100%);
  /* gradientes de card de portfólio — um por case, herdados da ref. Broud */
  --vd-card-1: linear-gradient(160deg, #FF7A18 0%, #FFC46B 100%);
  --vd-card-2: linear-gradient(160deg, #9BC53D 0%, #D6E86B 100%);
  --vd-card-3: linear-gradient(160deg, #5B5BFF 0%, #A78BFA 100%);
  --vd-card-4: linear-gradient(160deg, #F06292 0%, #FFAB91 100%);
  --vd-card-5: linear-gradient(160deg, #00BFA5 0%, #7BE8D5 100%);
  --vd-card-6: linear-gradient(160deg, #CCFF00 0%, #7A9900 100%);
  --vd-card-7: linear-gradient(160deg, #37474F 0%, #78909C 100%);

  /* ---------- SEMÂNTICOS — TEMA ESCURO (PADRÃO DA MARCA) ----------
     A Vogel é uma marca escura. O tema claro é a exceção. */
  --vd-bg:            var(--vd-neutral-1000);
  --vd-bg-subtle:     var(--vd-neutral-950);
  --vd-bg-muted:      var(--vd-neutral-900);
  --vd-bg-inverse:    var(--vd-neutral-50);
  --vd-surface:       var(--vd-neutral-950);
  --vd-surface-raised:var(--vd-neutral-900);
  --vd-text:          var(--vd-neutral-50);    /* 18,97:1 AAA */
  --vd-text-muted:    var(--vd-neutral-400);   /*  5,58:1 AA  */
  --vd-text-subtle:   var(--vd-neutral-500);
  --vd-text-inverse:  var(--vd-neutral-1000);
  --vd-text-brand:    var(--vd-lime-500);      /* 16,85:1 AAA — pode ser texto */
  --vd-border:        var(--vd-neutral-800);
  --vd-border-strong: var(--vd-neutral-700);
  --vd-accent:        var(--vd-lime-500);
  --vd-accent-hover:  var(--vd-lime-400);
  --vd-accent-active: var(--vd-lime-600);
  --vd-accent-fg:     var(--vd-neutral-1000);  /* preto sobre lima = 16,85:1 */
  --vd-focus-ring:    var(--vd-lime-500);
}

/* ---------- TEMA CLARO (exceção: documento, proposta impressa) ---------- */
:root[data-theme="light"], .vd-light {
  --vd-bg:            var(--vd-neutral-0);
  --vd-bg-subtle:     var(--vd-neutral-50);
  --vd-bg-muted:      var(--vd-neutral-100);
  --vd-bg-inverse:    var(--vd-neutral-1000);
  --vd-surface:       var(--vd-neutral-0);
  --vd-surface-raised:var(--vd-neutral-50);
  --vd-text:          var(--vd-neutral-1000);
  --vd-text-muted:    var(--vd-neutral-600);
  --vd-text-subtle:   var(--vd-neutral-500);
  --vd-text-inverse:  var(--vd-neutral-50);
  /* ⚠️ lima sobre branco dá 1,2:1 — NUNCA como texto no claro.
     No tema claro o lima é só superfície/marcador. */
  --vd-text-brand:    var(--vd-lime-700);      /* 3,4:1 — só display ≥24px */
  --vd-border:        var(--vd-neutral-200);
  --vd-border-strong: var(--vd-neutral-300);
  --vd-accent:        var(--vd-lime-500);
  --vd-accent-fg:     var(--vd-neutral-1000);
}

:root {
  /* ---------- TIPOGRAFIA ----------
     Display: Bricolage Grotesque — densa, aguenta tamanho gigante
       sem afrouxar, tem itálico com caráter. É ela que dá o soco.
     Texto:   Manrope — semi-geométrica, legível, casa com a Bricolage.
     Dados:   JetBrains Mono — número, data, prova, rótulo. */
  --vd-font-display: "Bricolage Grotesque", "Arial Black", system-ui, sans-serif;
  --vd-font-body:    "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --vd-font-mono:    "JetBrains Mono", "SF Mono", Menlo, monospace;

  /* escala agressiva — o display vai MUITO grande, como na referência */
  --vd-text-hero:    clamp(3rem, 9vw, 8.5rem);   /* 48 → 136px */
  --vd-text-display: clamp(2.5rem, 6vw, 5rem);   /* 40 → 80px  */
  --vd-text-h1:      clamp(2.25rem, 5vw, 4rem);
  --vd-text-h2:      clamp(1.875rem, 3.6vw, 3rem);
  --vd-text-h3:      clamp(1.375rem, 2.2vw, 1.875rem);
  --vd-text-h4:      1.25rem;
  --vd-text-lg:      1.125rem;
  --vd-text-base:    1rem;
  --vd-text-sm:      0.875rem;
  --vd-text-xs:      0.75rem;
  --vd-text-2xs:     0.6875rem;

  --vd-weight-light:    300;
  --vd-weight-regular:  400;
  --vd-weight-medium:   500;
  --vd-weight-semibold: 600;
  --vd-weight-bold:     700;
  --vd-weight-black:    800;   /* ★ peso do display */

  --vd-leading-none:    1;
  --vd-leading-tight:   1.05;  /* ★ títulos grandes colam as linhas */
  --vd-leading-snug:    1.2;
  --vd-leading-normal:  1.55;
  --vd-leading-relaxed: 1.75;

  /* tracking negativo forte no display — assinatura da nova direção */
  --vd-tracking-hero:   -0.04em;
  --vd-tracking-tight:  -0.025em;
  --vd-tracking-normal: 0;
  --vd-tracking-wide:   0.1em;
  --vd-tracking-widest: 0.24em;   /* ★ rótulos mono e o "DIGITAL" do logo */

  /* ---------- ESPAÇAMENTO (base 4px) ---------- */
  --vd-space-1: 0.25rem; --vd-space-2: 0.5rem;  --vd-space-3: 0.75rem;
  --vd-space-4: 1rem;    --vd-space-5: 1.5rem;  --vd-space-6: 2rem;
  --vd-space-7: 3rem;    --vd-space-8: 4rem;    --vd-space-9: 6rem;
  --vd-space-10: 8rem;   --vd-space-11: 12rem;  --vd-space-12: 16rem;

  /* ---------- FORMA ----------
     Pílula é a forma-assinatura da nova direção (botões, badges,
     cards de mockup). Vem das duas referências. */
  --vd-radius-sm:   6px;
  --vd-radius-md:   10px;
  --vd-radius-lg:   18px;
  --vd-radius-xl:   28px;
  --vd-radius-2xl:  40px;
  --vd-radius-full: 9999px;

  --vd-border-width:       1px;
  --vd-border-width-thick: 2px;

  /* ---------- ELEVAÇÃO ---------- */
  --vd-shadow-sm: 0 1px 2px rgba(0,0,0,.4);
  --vd-shadow-md: 0 8px 24px rgba(0,0,0,.45);
  --vd-shadow-lg: 0 24px 64px rgba(0,0,0,.55);
  --vd-shadow-card: 0 30px 80px rgba(0,0,0,.5);

  /* ---------- GRID & LAYOUT ---------- */
  --vd-container:      1240px;
  --vd-container-wide: 1480px;
  --vd-measure:        64ch;
  --vd-columns:        12;
  --vd-gutter:         24px;
  --vd-bp-sm: 640px; --vd-bp-md: 768px; --vd-bp-lg: 1024px; --vd-bp-xl: 1280px;

  /* ---------- MOVIMENTO ----------
     A nova direção é dinâmica: marquee, reveal, parallax de mockup. */
  --vd-ease:      cubic-bezier(.4,0,.2,1);
  --vd-ease-out:  cubic-bezier(.16,1,.3,1);   /* saída suave e longa */
  --vd-ease-in:   cubic-bezier(.7,0,.84,0);
  --vd-duration-fast:   180ms;
  --vd-duration-normal: 320ms;
  --vd-duration-slow:   620ms;
  --vd-duration-marquee: 34s;

  /* ---------- LOGO ---------- */
  --vd-logo-clearspace: 0.3;
  --vd-logo-min-height-lockup: 26px;
  --vd-logo-min-size-symbol:   24px;   /* piso remedido 01/ago. Abaixo: wordmark ou nada.
                                          O simbolo compacto foi ELIMINADO em 05/ago/2026. */
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --vd-duration-fast: 0ms; --vd-duration-normal: 0ms;
    --vd-duration-slow: 0ms; --vd-duration-marquee: 0s;
  }
}