/* ============================================================
   LITH ENGENHARIA — Design Tokens  v1.0
   Marca real (manual lith-branding): laranja #e44129 (cor principal),
   preto, cinza claro #eaeaea, cinza escuro #4d4d4d.
   Espírito: solidez, segurança, autoridade + energia da cor.
   ============================================================ */
:root{
  /* — Escala de tinta/cinza (marca) — */
  --ink:        #1A1A1A;  /* preto da marca (primária)        */
  --graphite-950:#141414;
  --graphite-900:#1C1C1C;
  --graphite-800:#242424;
  --steel-700:  #333333;
  --steel-600:  #444444;
  --steel-500:  #4D4D4D;  /* cinza escuro secundário (marca)  */
  --concrete-400:#8A8A8A;
  --concrete-300:#B5B5B5;
  --concrete-200:#D6D6D6;  /* hairlines / bordas               */
  --paper-100:  #EAEAEA;  /* cinza claro secundário (marca)   */
  --paper-50:   #F6F6F5;  /* fundo base                       */
  --white:      #FFFFFF;

  /* — Acento LARANJA (cor principal da marca) — */
  --accent:        #E44129;  /* laranja/vermelho principal       */
  --accent-ink:    #BE3019;  /* hover/pressionado sobre claro    */
  --accent-bright: #F0583F;  /* sobre fundos escuros             */
  --accent-tint:   rgba(228,65,41,.10);

  /* — Papéis semânticos — */
  --bg:            var(--white);
  --bg-alt:        var(--paper-100);
  --bg-dark:       var(--ink);
  --surface:       var(--white);
  --text:          var(--ink);
  --text-muted:    var(--steel-500);
  --text-on-dark:  var(--paper-100);
  --text-on-dark-muted: var(--concrete-400);
  --border:        var(--concrete-200);
  --border-dark:   #2E2E2E;

  /* — Tipografia — */
  --font-display: 'Saira', ui-sans-serif, system-ui, sans-serif;
  --font-body:    'Inter', ui-sans-serif, system-ui, sans-serif;

  --fs-display: clamp(2.75rem, 6vw, 5.5rem);
  --fs-h1:      clamp(2.25rem, 4.5vw, 3.5rem);
  --fs-h2:      clamp(1.75rem, 3vw, 2.5rem);
  --fs-h3:      clamp(1.25rem, 2vw, 1.5rem);
  --fs-body-lg: 1.125rem;
  --fs-body:    1rem;
  --fs-sm:      0.9375rem;
  --fs-overline:0.75rem;

  /* — Espaçamento (base 4px) — */
  --space-1: .25rem;  --space-2: .5rem;   --space-3: .75rem;  --space-4: 1rem;
  --space-6: 1.5rem;  --space-8: 2rem;    --space-12: 3rem;   --space-16: 4rem;
  --space-24: 6rem;   --space-32: 8rem;

  /* — Layout — */
  --container: 1200px;
  --radius:    2px;   /* blocos retos = solidez/engenharia (marca) */
  --radius-lg: 4px;

  /* — Elevação — */
  --shadow-sm: 0 1px 2px rgba(26,26,26,.06);
  --shadow-md: 0 6px 20px rgba(26,26,26,.10);
  --shadow-lg: 0 18px 48px rgba(26,26,26,.16);

  /* — Movimento — */
  --transition-fast: 150ms cubic-bezier(.4,0,.2,1);
  --transition-base: 260ms cubic-bezier(.4,0,.2,1);
  --transition-slow: 440ms cubic-bezier(.4,0,.2,1);
}