/* ============================================
   ACE LANE LOGISTICS — DESIGN SYSTEM TOKENS
   ============================================ */

/* ----------------------------
   CORES
   ---------------------------- */
:root {
  /* Primárias */
  --color-orange:        #F5744D;   /* CTA principal, destaques */
  --color-orange-hover:  #B84320;   /* hover dos botões laranja */

  /* Neutros escuros (backgrounds) */
  --color-black:         #1c1d21;   /* fundo hero, footer */
  --color-gray-dark:     #222328;   /* fundo hero, footer */
  --color-gray:          #4f5057;   /* cards escuros, navbar ao rolar */
  --color-gray-light:    #b6b6af;   /* bordas escuras */
  --color-gray-lighter:  #DCDDD9;   /* fundo alternado */
  --color-gray-bg:       #F4F4F4;
  --color-white:         #FFFFFF;

  /* Textos */
  --color-text-primary:  var(--color-gray-dark);   /* títulos em fundo claro */
  --color-text-secondary:var(--color-gray);   /* corpo em fundo claro */
  --color-text-light:    var(--color-white);   /* textos em fundo escuro */
  --color-text-muted:    var(--color-gray-light);   /* labels, captions */

  /* Inputs */
  --color-input-border:  var(--color-gray-lighter);
  --color-input-focus:   var(--color-orange);
}

/* ----------------------------
   TIPOGRAFIA
   ---------------------------- */
:root {
  --font-heading: 'Inter', sans-serif;  /* títulos grandes */
  --font-body:    'Inter', sans-serif;             /* corpo */
  --font-label:   'Inter', sans-serif;             /* labels, nav */

  /* Tamanhos */
  --text-xs:    0.75rem;    /* 12px — captions, copyright */
  --text-sm:    0.9rem;   /* 14px — labels de input, footer links */
  --text-base:  1rem;       /* 16px — corpo padrão */
  --text-lg:  clamp(1rem,     0.96rem + 0.19vw, 1.1rem); /* 16 → 18px */
  --text-xl:  clamp(1.1rem, 1.06rem + 0.26vw, 1.2rem);   /* 18 → 20.8px */
  --text-2xl: clamp(1.35rem, 1.24rem + 0.56vw, 1.5rem);  /* 22 → 28px */
  --text-3xl: clamp(1.5rem,   1.3rem + 0.75vw, 2rem);     /* 24 → 32px */
  --text-4xl: clamp(1.75rem, 1.3rem + 1.4vw, 3.25rem);  /* 28 → 52px */
  --text-5xl: clamp(2.75rem, 1.7rem + 2vw, 3.75rem); /* 56 → 80px */
  --text-6xl: clamp(3rem, 2rem + 3.33vw, 4.5rem); /* 56 → 80px */

  /* Pesos */
  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semibold:600;
  --weight-bold:    700;
  --weight-extrabold:    800;

  /* Line-height */
  --leading-tight:  1.1;
  --leading-snug:   1.3;
  --leading-normal: 1.6;
  --leading-relaxed:1.8;
}

/* ----------------------------
   ESPAÇAMENTOS
   ---------------------------- */
:root {
  --space-1:   0.25rem;   /*  4px */
  --space-2:   0.5rem;    /*  8px */
  --space-3:   0.75rem;   /* 12px */
  --space-4:   1rem;      /* 16px */
  --space-5:   1.25rem;   /* 20px */
  --space-6:   1.5rem;    /* 24px */
  --space-8:   2rem;      /* 32px */
  --space-10:  2.5rem;    /* 40px */
  --space-12:  3rem;      /* 48px */
  --space-16:  4rem;      /* 64px */
  --space-20:  5rem;      /* 80px */
  --space-24:  6rem;      /* 96px */
  --space-32:  8rem;      /* 128px */

  /* Seções */
  --section-padding-y:  var(--space-32);  /* padding vertical padrão de seção */
  --section-padding-x:  var(--space-6);   /* padding horizontal (mobile) */

}

/* ----------------------------
   BORDER RADIUS
   ---------------------------- */
:root {
  --radius-sm:   4px;    /* buttons */
  --radius-md:   8px;    /* cards */
  --radius-pill: 999px;  /* badges */
  --radius-none: 0;
}

/* ----------------------------
   SOMBRAS
   ---------------------------- */
:root {
  --shadow-sm:  0 1px 3px rgba(0,0,0,0.08);
  --shadow-md:  0 4px 16px rgba(0,0,0,0.10);
  --shadow-lg:  0 8px 32px rgba(0,0,0,0.14);
  --shadow-xl:  0 16px 48px rgba(0,0,0,0.18);
}

/* ----------------------------
   TRANSIÇÕES
   ---------------------------- */
:root {
  --transition-fast:   150ms ease;
  --transition-normal: 250ms ease;
  --transition-slow:   400ms ease;
}

/* ----------------------------
   Z-INDEX
   ---------------------------- */
:root {
  --z-base:    0;
  --z-above:   10;
  --z-nav:     100;
  --z-overlay: 200;
  --z-modal:   300;
}

/* ----------------------------
   BREAKPOINTS (referência — usar em media queries)
   sm:  640px
   md:  768px
   lg:  1024px
   xl:  1280px
   ---------------------------- */

/* ----------------------------
   RESET & BASE
   ---------------------------- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
}

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--weight-regular);
  color: var(--color-text-primary);
  background-color: var(--color-gray-bg);
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
}

ul, ol {
  list-style: none !important;
  padding-inline-start: 0;
  -webkit-padding-start: 0;
  margin-inline-start: 0;
}

ul li, ol li {
  list-style: none !important;
  list-style-type: none !important;
  list-style-image: none !important;
}

ul li::marker,
ol li::marker {
  content: "" !important;
  display: none !important;
  font-size: 0 !important;
  color: transparent !important;
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

.white {
  color: var(--color-white);
}

.orange {
  color: var(--color-orange);
  font-weight: 800;
}

.all-caps {
  text-transform: uppercase;
}

.pt-0 {
  padding-top: 0 !important;
}

/* ----------------------------
   CONTAINER
   ---------------------------- */
.container {
  width: 100%;
  margin-inline: auto;
  padding-inline: var(--space-6);
}

@media (min-width: 768px) {
  .container {
      max-width: 95%;
  }
}

@media (min-width: 992px) {
  .container {
      max-width: 960px;
  }
}

@media (min-width: 1024px) {
  .container {
      max-width: 990px;
  }
}

@media (min-width: 1200px) {
  .container {
        max-width: 1140px;
    }
  }

@media (min-width: 1400px) {
  .container {
      max-width: 1320px;
  }
}

@media (min-width: 1800px) {
  .container {
      max-width: 85%;
  }
}


/* ----------------------------
   Buttons
   ---------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-family: var(--font-label);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-sm);
  border: none;
  cursor: pointer;
  transition: background var(--transition-fast), transform var(--transition-fast);
}

.btn.sm {
  padding: var(--space-1) var(--space-2);
}

.btn:hover  { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

/* ----------------------------
   INPUTS
   ---------------------------- */
.input,
.textarea {
  width: 100%;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-text-primary);
  background: var(--color-white);
  border: 1px solid var(--color-input-border);
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-3);
  transition: border-color var(--transition-fast);
}

.input:focus,
.textarea:focus {
  border-color: var(--color-input-focus);
}

.textarea {
  outline: none;
  field-sizing: content;
  resize: none;
  max-height: 10em;
  min-height: 4em; 
}

label {
  display: block;
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  color: var(--color-text-secondary);
  margin-bottom: var(--space-2);
}

/* ----------------------------
   CARDS
   ---------------------------- */
.card {
  background: var(--color-white);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}

/* ----------------------------
   SECTION HEADING
   ---------------------------- */
section {
  padding: var(--section-padding-y) 0;
}

@media (max-width: 768px) {
  section {
    padding: var(--space-16) 0;
  }
}

.section-title {
  font-family: var(--font-heading);
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  color: var(--color-text-primary);
}

.section-subtitle {
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  margin-top: var(--space-3);
}

/* ----------------------------
   Font Size
   ---------------------------- */
.heading-huge {
  font-size: var(--text-6xl);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  color: var(--color-text-light);
}
.heading-lg {font-size: var(--text-lg); font-weight: var(--weight-bold); line-height: var(--leading-tight) }
.heading-xl {font-size: var(--text-xl); font-weight: var(--weight-bold); line-height: var(--leading-tight) }
.heading-2xl {font-size: var(--text-2xl); font-weight: var(--weight-bold); line-height: var(--leading-tight);}
.heading-3xl {font-size: var(--text-3xl); font-weight: var(--weight-bold); line-height: var(--leading-tight); }
.heading-4xl {font-size: var(--text-4xl); font-weight: var(--weight-bold); line-height: var(--leading-tight); }
.heading-5xl {font-size: var(--text-5xl); font-weight: var(--weight-bold); line-height: var(--leading-tight); }
.heading-base {
  font-size: var(--text-base);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

p {
  font-size: var(--text-base);
  line-height: var(--leading-normal);
}

.text-center {
  text-align: center;
}

.text-sm {
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
}

.text-lg {
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
}

.text-xl {
  font-size: var(--text-xl);
}

.highlight {
  background-color: var(--color-orange); font-weight: var(--weight-bold); color: var(--color-gray-dark); padding: var(--space-1) }


/* ----------------------------
   GOOGLE FONTS IMPORT
   (adicionar no <head> de cada página)

   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link href="https://fonts.googleapis.com/css2?family=Barlow:wght@400;500;600;700&family=Barlow+Condensed:wght@600;700&display=swap" rel="stylesheet">
   ---------------------------- */

   .mb-0 {
    margin-bottom: 0 !important;
   }