/* ==========================================================================
   LUMA LOGISTICA E LOCACOES - DESIGN TOKENS
   Fonte unica de verdade para cor, tipografia, espaco, ritmo e movimento.
   Nenhum valor bruto (hex, px de escala, curva de easing) deve aparecer
   fora deste arquivo.
   ========================================================================== */

:root {
  /* ----------------------------------------------------------------------
     1. COR
     Paleta reduzida e proposital: grafite / azul-petroleo profundo como
     base, zinco-concreto frio como neutro claro, ambar de sinalizacao
     industrial como unico acento. Nenhuma outra matiz existe no site.
     ---------------------------------------------------------------------- */

  /* Escuros - grafite e azul-petroleo */
  --c-graphite-950: #06090B;   /* rodape, sobreposicao mais profunda        */
  --c-petrol-900:   #0B1A21;   /* fundo escuro primario                     */
  --c-petrol-850:   #0F2129;   /* fundo escuro alternado                    */
  --c-petrol-800:   #142C36;   /* superficie elevada sobre escuro           */
  --c-petrol-700:   #1B3B47;   /* superficie elevada 2 / hover              */
  --c-petrol-600:   #24505E;   /* traco e divisor sobre escuro              */
  --c-petrol-500:   #3A6C7C;   /* traco enfatizado sobre escuro             */

  /* Claros - zinco e concreto (neutro frio, nunca creme) */
  --c-zinc-000:     #F6F7F5;   /* superficie elevada sobre claro            */
  --c-zinc-050:     #EEEFEC;   /* fundo claro primario                      */
  --c-zinc-100:     #E5E7E3;   /* fundo claro alternado                     */
  --c-zinc-200:     #D6D9D4;   /* traco e divisor sobre claro               */
  --c-zinc-300:     #B9BEB9;   /* traco enfatizado sobre claro              */
  --c-zinc-500:     #656B68;   /* texto terciario sobre claro - 4.7:1 (AA)  */

  /* Acento - ambar de sinalizacao de equipamento pesado */
  --c-amber-400:    #FFB44D;   /* realce de hover sobre escuro              */
  --c-amber-500:    #FF9E1B;   /* acento primario                           */
  --c-amber-600:    #E07C00;   /* acento em superficie clara (preenchimento)*/
  --c-amber-800:    #8A4B00;   /* texto ambar sobre claro (contraste AA)    */

  /* Estados funcionais - derivados da paleta, sem introduzir matiz nova */
  --c-danger:       #FF6A52;   /* erro de formulario sobre escuro           */
  --c-danger-deep:  #A32615;   /* erro de formulario sobre claro            */
  --c-success:      #5FD3A0;   /* confirmacao de envio sobre escuro         */

  /* --------- Papeis semanticos: TEMA ESCURO (padrao) --------------------- */
  --bg:             var(--c-petrol-900);
  --bg-alt:         var(--c-petrol-850);
  --surface:        var(--c-petrol-800);
  --surface-hi:     var(--c-petrol-700);
  --line:           var(--c-petrol-600);
  --line-hi:        var(--c-petrol-500);
  --text:           #EDF1F0;
  --text-muted:     #9BAAAF;
  --text-faint:     #6B7F87;
  --accent:         var(--c-amber-500);
  --accent-hi:      var(--c-amber-400);
  --accent-text:    var(--c-amber-500);
  --on-accent:      var(--c-graphite-950);
  --field-bg:       rgb(6 9 11 / 0.28);
  --focus-ring:     var(--c-amber-400);

  /* ----------------------------------------------------------------------
     2. TIPOGRAFIA
     Duas familias, nunca mais.
     - Archivo (variavel, eixo de largura 62-125) para titulos e rotulos
       tecnicos. O eixo de LARGURA e o dispositivo tipografico da marca:
       rotulos comprimidos e tracejados, titulos largos e plantados.
     - IBM Plex Sans para corpo de texto, formularios e dados tabulares.
     ---------------------------------------------------------------------- */
  --ff-display: "Archivo", "Archivo Fallback", "Helvetica Neue", Arial, sans-serif;
  --ff-body: "IBM Plex Sans", "IBM Plex Sans Fallback", system-ui, -apple-system,
             "Segoe UI", Roboto, sans-serif;

  /* Eixos de largura do Archivo - variacao de voz, nao de peso */
  --wd-compressed: 78;   /* rotulos, eyebrows, dados de tabela              */
  --wd-normal: 100;      /* subtitulos                                      */
  --wd-wide: 116;        /* titulos de secao e hero                         */

  /* Escala modular 1.25 (terca maior), fluida entre 360px e 1600px.
     Base 16px -> 20 - 25 - 31.25 - 39 - 48.8 - 61 - 76.3 - 95.4            */
  --fs-label:   0.6875rem;                                    /* 11         */
  --fs-xs:      0.8125rem;                                    /* 13         */
  --fs-sm:      0.9375rem;                                    /* 15         */
  --fs-body:    clamp(1rem, 0.965rem + 0.15vw, 1.0625rem);    /* 16 -> 17   */
  --fs-lead:    clamp(1.0625rem, 0.95rem + 0.5vw, 1.375rem);  /* 17 -> 22   */
  --fs-h4:      clamp(1.125rem, 1.04rem + 0.36vw, 1.375rem);  /* 18 -> 22   */
  --fs-h3:      clamp(1.375rem, 1.19rem + 0.78vw, 1.9375rem); /* 22 -> 31   */
  --fs-h2:      clamp(1.9375rem, 1.44rem + 2.1vw, 3.4375rem); /* 31 -> 55   */
  --fs-display: clamp(2.4375rem, 1.63rem + 3.4vw, 4.75rem);   /* 39 -> 76   */
  --fs-hero:    clamp(2.125rem, 1.17rem + 4.26vw, 5rem);      /* 34 -> 80   */
  --fs-metric:  clamp(2.5rem, 1.1rem + 4.2vw, 4.5rem);        /* 40 -> 72   */

  --lh-tight: 0.95;
  --lh-snug: 1.08;
  --lh-heading: 1.14;
  --lh-body: 1.62;
  --lh-relaxed: 1.72;

  --ls-label: 0.16em;
  --ls-eyebrow: 0.2em;
  --ls-hero: -0.028em;
  --ls-display: -0.022em;
  --ls-h2: -0.018em;
  --ls-h3: -0.012em;

  /* ----------------------------------------------------------------------
     3. ESPACO E GRID
     Base 4px. Ritmo vertical deliberadamente irregular entre secoes -
     nunca o mesmo padding para todas.
     ---------------------------------------------------------------------- */
  --sp-1: 0.25rem;   --sp-2: 0.5rem;    --sp-3: 0.75rem;   --sp-4: 1rem;
  --sp-5: 1.25rem;   --sp-6: 1.5rem;    --sp-7: 2rem;      --sp-8: 2.5rem;
  --sp-9: 3rem;      --sp-10: 4rem;     --sp-11: 5rem;     --sp-12: 6.5rem;
  --sp-13: 8rem;     --sp-14: 10rem;

  --shell-max: 90rem;                                   /* 1440px           */
  /* Respiro lateral: 20px no celular (onde area de tela e escassa) subindo
     ate 136px no desktop largo. A inclinacao so passa a valer acima de
     ~420px, para nao roubar largura de leitura no telefone.                */
  --shell-pad: clamp(1.25rem, -0.2rem + 5.6vw, 8.5rem);
  --grid-gap: clamp(1rem, 0.4rem + 1.7vw, 2rem);

  /* Alturas de secao - variacao intencional de respiro */
  --section-pad-sm: clamp(3.5rem, 2.4rem + 4.6vw, 6rem);
  --section-pad-md: clamp(4.5rem, 2.8rem + 7vw, 9rem);
  --section-pad-lg: clamp(5.5rem, 3.1rem + 10vw, 12rem);

  --header-h: 5.25rem;
  --header-h-compact: 4rem;

  /* ----------------------------------------------------------------------
     4. TRACO, RAIO E ELEVACAO
     Cantos quase retos: equipamento pesado nao tem raio generoso.
     ---------------------------------------------------------------------- */
  --stroke: 1px;
  --stroke-icon: 1.5;             /* espessura unica de TODO icone SVG      */
  --radius-xs: 2px;
  --radius-sm: 3px;
  --radius-md: 4px;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 2px rgb(6 9 11 / 0.20);
  --shadow-md: 0 10px 24px -12px rgb(6 9 11 / 0.45);
  --shadow-lg: 0 34px 70px -30px rgb(6 9 11 / 0.62);

  /* ----------------------------------------------------------------------
     5. MOVIMENTO
     Nenhuma curva padrao do navegador. Todo easing e declarado aqui.
     ---------------------------------------------------------------------- */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.30, 1);
  --ease-out-quart: cubic-bezier(0.25, 1, 0.50, 1);
  --ease-in-out-quint: cubic-bezier(0.83, 0, 0.17, 1);
  --ease-out-back: cubic-bezier(0.34, 1.42, 0.64, 1);

  --dur-fast: 180ms;
  --dur-base: 320ms;
  --dur-slow: 620ms;
  --dur-scene: 1100ms;

  --z-base: 1;
  --z-sticky: 60;
  --z-overlay: 90;   /* painel de menu em tela cheia                        */
  --z-header: 95;    /* acima do painel: o botao de fechar mora no header   */
  --z-modal: 100;
}

/* Em telas estreitas a largura da Archivo recua: o eixo largo e uma voz de
   placa, e placa larga em coluna estreita vira palavra solta por linha. */
@media (max-width: 40em) {
  :root {
    --wd-wide: 102;
    --ls-hero: -0.02em;
  }
}

/* --------- Papeis semanticos: TEMA CLARO (zinco / concreto) -------------- */
.theme-light {
  --bg:          var(--c-zinc-050);
  --bg-alt:      var(--c-zinc-100);
  --surface:     var(--c-zinc-000);
  --surface-hi:  #FFFFFF;
  --line:        var(--c-zinc-200);
  --line-hi:     var(--c-zinc-300);
  --text:        var(--c-petrol-900);
  --text-muted:  #545C59;
  --text-faint:  var(--c-zinc-500);
  --accent:      var(--c-amber-600);
  --accent-hi:   var(--c-amber-500);
  --accent-text: var(--c-amber-800);
  --on-accent:   var(--c-graphite-950);
  --field-bg:    #FFFFFF;
  --focus-ring:  var(--c-amber-800);
}

/* --------- Papeis semanticos: TEMA ESCURO explicito ---------------------- */
.theme-dark {
  --bg:          var(--c-petrol-900);
  --bg-alt:      var(--c-petrol-850);
  --surface:     var(--c-petrol-800);
  --surface-hi:  var(--c-petrol-700);
  --line:        var(--c-petrol-600);
  --line-hi:     var(--c-petrol-500);
  --text:        #EDF1F0;
  --text-muted:  #9BAAAF;
  --text-faint:  #6B7F87;
  --accent:      var(--c-amber-500);
  --accent-hi:   var(--c-amber-400);
  --accent-text: var(--c-amber-500);
  --on-accent:   var(--c-graphite-950);
  --field-bg:    rgb(6 9 11 / 0.28);
  --focus-ring:  var(--c-amber-400);
}

/* --------- Papeis semanticos: GRAFITE (rodape) -------------------------- */
.theme-graphite {
  --bg:          var(--c-graphite-950);
  --bg-alt:      #0A0E11;
  --surface:     #0E1418;
  --surface-hi:  var(--c-petrol-800);
  --line:        #1C262C;
  --line-hi:     var(--c-petrol-600);
  --text:        #DDE4E3;
  --text-muted:  #93A1A2;
  --text-faint:  #6B7A7D;
  --accent:      var(--c-amber-500);
  --accent-hi:   var(--c-amber-400);
  --accent-text: var(--c-amber-500);
  --on-accent:   var(--c-graphite-950);
  --field-bg:    rgb(6 9 11 / 0.4);
  --focus-ring:  var(--c-amber-400);
}

/* Metricas de fallback: evita salto de layout enquanto a webfont carrega. */
@font-face {
  font-family: "Archivo Fallback";
  src: local("Arial Narrow"), local("Helvetica Neue"), local("Arial");
  size-adjust: 96%;
  ascent-override: 92%;
  descent-override: 24%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "IBM Plex Sans Fallback";
  src: local("Segoe UI"), local("Helvetica Neue"), local("Arial");
  size-adjust: 101%;
  ascent-override: 96%;
  descent-override: 25%;
  line-gap-override: 0%;
}