/* ============================================================
   CG LUB — DESIGN TOKENS
   Cores amostradas pixel a pixel de "CG LUB BROCHURA.pdf".
   Este arquivo e a unica fonte de verdade: layout, componentes
   e futuras paginas consomem daqui.
   ============================================================ */

:root{

  /* -------- MARCA -------------------------------------------------
     Tres cores fazem a identidade. O resto e estrutura.             */

  --lime:        #A8CF45;   /* assinatura. titulos, chevrons, filetes */
  --lime-deep:   #7FA330;   /* hover / estados pressionados          */
  --lime-glow:   #C6E86B;   /* realce pontual, foco                  */

  --amber:       #FFAA00;   /* CG LUB. exclusiva de CTA e destaque   */
  --amber-deep:  #D98F00;
  --amber-soft:  #FFD166;   /* fundo tenue de aviso / destaque        */

  --lubrax:      #066232;   /* verde institucional Lubrax            */
  --lubrax-lit:  #0A8544;

  --green-glow:  #00D200;   /* o verde puro do brilho da capa. SO em
                               brilho de fundo, nunca em texto ou area
                               chapada: em area grande estoura a tela  */

  /* -------- FUNDOS E SUPERFICIES ----------------------------------
     Escala de verdes quase-pretos. Nunca preto puro: o fundo da
     brochura sempre tem clorofila dentro.                           */

  --bg:          #071409;   /* fundo da pagina                        */
  --bg-deep:     #040D06;   /* poços, footer, overlays                */
  --surface:     #0C2411;   /* cards, blocos elevados                 */
  --surface-2:   #123219;   /* card sobre card, inputs                */
  --surface-3:   #1A4423;   /* hover de superficie                    */

  /* -------- TEXTO -------------------------------------------------- */

  --text:        #FFFFFF;
  --text-soft:   #C8D6C4;   /* corpo de texto longo                   */
  --text-mute:   #8CA189;   /* legendas, labels, metadados            */
  --text-ink:    #071409;   /* texto sobre lime e ambar               */

  /* -------- SEGMENTOS ----------------------------------------------
     As tres cores dos cards da pag. 4. Uso restrito a esse bloco:
     fora dali, viram ruido.                                          */

  --seg-revenda:   #65C538;
  --seg-transporte:#3A72BE;
  --seg-industria: #1DB5B4;

  /* -------- FOLDER FINAL (set/2026) --------------------------------
     Cores novas do folder. O amarelo da marca Lubrax (#F9EE00) nao
     entra: so aparece dentro do SVG do selo.                         */

  --amber-folder: #FAA72A;   /* frases-destaque, medido do PDF      */
  --amber-bora:   #FFBE2E;   /* fim do degrade do bloco Bora!       */

  /* -------- LINHAS E BORDAS ---------------------------------------- */

  --line:        rgba(168,207,69,.22);  /* filete lime translucido    */
  --line-soft:   rgba(255,255,255,.10);
  --line-strong: rgba(168,207,69,.55);

  /* -------- TIPOGRAFIA ---------------------------------------------
     Marine (Adobe Fonts) nos titulos. Lato no texto.
     marine-oblicua e usada SO nas frases-ancora depois do chevron.   */

  --font-display: "marine", "Barlow Semi Condensed", "Helvetica Neue", sans-serif;
  --font-italic:  "marine-oblicua", "marine", italic, sans-serif;
  --font-text:    "Lato", -apple-system, "Segoe UI", sans-serif;

  /* escala fluida — proporcao ~1.25 (terca maior)                    */
  --t-display: clamp(2.75rem, 1.6rem + 5.2vw, 5.5rem);   /*  44 → 88  */
  --t-h1:      clamp(2.25rem, 1.5rem + 3.4vw, 4rem);     /*  36 → 64  */
  --t-h2:      clamp(1.75rem, 1.3rem + 2.1vw, 2.75rem);  /*  28 → 44  */
  --t-h3:      clamp(1.375rem, 1.15rem + 1vw, 1.875rem); /*  22 → 30  */
  --t-h4:      1.125rem;                                  /*  18      */
  --t-lead:    clamp(1.0625rem, 1rem + .35vw, 1.25rem);  /*  17 → 20  */
  --t-body:    1rem;                                      /*  16      */
  --t-small:   .875rem;                                   /*  14      */
  --t-label:   .75rem;                                    /*  12      */

  /* tracking: Marine e condensada, entao titulo grande fecha o passo */
  --track-display: -.02em;
  --track-h:       -.01em;
  --track-label:   .14em;

  --lh-display: .96;
  --lh-display-tight: .88;  /* entrelinha do H1 da capa: 30,55/34,69pt */
  --lh-h:       1.06;
  --lh-body:    1.65;

  /* -------- ESPACO -------------------------------------------------
     Base 4px. Secoes respiram muito: a brochura tem margens largas.  */

  --s-1: 4px;   --s-2: 8px;   --s-3: 12px;  --s-4: 16px;
  --s-5: 24px;  --s-6: 32px;  --s-7: 48px;  --s-8: 64px;
  --s-9: 96px;  --s-10: 128px;

  --header-h:   clamp(64px, 6vw, 88px);
  --section-y:  clamp(64px, 8vw, 128px);
  --gutter:     clamp(20px, 4vw, 48px);
  --maxw:       1240px;
  --maxw-text:  68ch;

  /* -------- RAIO ---------------------------------------------------
     Assinatura da brochura: cantos de cima arredondados, base reta.  */

  --r-sm:   4px;
  --r-md:   10px;
  --r-lg:   20px;
  --r-card: var(--r-lg) var(--r-lg) var(--r-sm) var(--r-sm);
  --r-pill: 999px;

  /* Moldura do folder: cantos opostos bem abertos (superior esquerdo
     e inferior direito) e os outros dois quase retos. Fotos dos CDs e
     bloco ambar do Bora!. */
  --r-aberto:  clamp(40px, 7vw, 96px);
  --r-fechado: clamp(10px, 1.4vw, 18px);
  --r-folder:
    var(--r-aberto) var(--r-fechado)
    calc(var(--r-aberto) * 1.35) var(--r-fechado);

  /* -------- SOMBRA E BRILHO ---------------------------------------- */

  --shadow-1: 0 2px 10px rgba(0,0,0,.35);
  --shadow-2: 0 12px 32px rgba(0,0,0,.45);
  --shadow-3: 0 24px 64px rgba(0,0,0,.55);
  --glow-lime:  0 0 0 3px rgba(168,207,69,.25);
  --glow-amber: 0 0 0 3px rgba(255,170,0,.28);

  /* -------- MOVIMENTO ----------------------------------------------
     Curto e seco. Distribuidora e sobre confiabilidade, nao sobre
     efeito: nada acima de 500ms, nada com bounce.                    */

  --ease:       cubic-bezier(.22,.61,.36,1);   /* geral            */
  --ease-out:   cubic-bezier(.16,1,.3,1);      /* entradas         */
  --ease-draw:  cubic-bezier(.33,0,.15,1);     /* tracado da curva */

  --dur-fast:     140ms;   /* resposta ao toque: hover, cor        */
  --dur:          260ms;   /* card sobe, borda acende, menu abre   */
  --dur-slow:     480ms;   /* header, foto em escala               */
  --dur-entrance: 720ms;   /* entrada de bloco ao rolar            */
  --dur-draw:    1400ms;   /* curva neon se desenhando             */

  --stagger-step: 70ms;    /* intervalo entre irmaos de uma grade  */
  --stagger-max:  6;       /* teto de itens escalonados            */

  --z-header: 100;
  --z-fab:    90;
}

@media (prefers-reduced-motion: reduce){
  :root{
    --dur-fast:0ms; --dur:0ms; --dur-slow:0ms;
    --dur-entrance:0ms; --dur-draw:0ms; --stagger-step:0ms;
  }
}