/* ============================================================
   CERRADO EXPRESS — Colors & Type foundations
   ------------------------------------------------------------
   Source: "MIV - Cerrado.pdf" (Manual de Identidade Visual)
   Color board: #1E3A8A  #C2410C  #FB923C
   Typography:  Bahnschrift (impact/títulos) + Inter (suporte)

   TYPOGRAPHY: Bahnschrift (impact/títulos + logo) is now SELF-HOSTED
   from /fonts (the brand-supplied files) via the @font-face below.
   It is a condensed DIN-style variable font; the brand's italic
   "velocidade tipográfica" is rendered as a synthesized oblique
   (Bahnschrift ships upright only), matching the slanted logo.
   Inter (body) is now SELF-HOSTED from /fonts (brand-supplied).
   JetBrains Mono (data/códigos) remains on the Google Fonts CDN —
   it was not supplied as a file. See README.
   ============================================================ */

@font-face {
  font-family: 'Bahnschrift';
  src: url('fonts/Bahnschrift.woff2') format('woff2'),
       url('fonts/Bahnschrift.woff') format('woff'),
       url('fonts/Bahnschrift.ttf') format('truetype');
  font-weight: 100 900;
  font-stretch: 75% 100%;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: url('fonts/120e0ce82c6e82ef6e31c808ae2ebf22.woff2') format('woff2'),
       url('fonts/Inter.woff') format('woff'),
       url('fonts/Inter.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700&display=swap');

:root {
  /* ---------- BRAND CORE ---------- */
  --brand-blue:        #1E3A8A;  /* Azul Cerrado — autoridade, infraestrutura */
  --brand-rust:        #C2410C;  /* Terracota — o pelo do lobo, a terra do cerrado */
  --brand-sun:         #FB923C;  /* Laranja Sol — o círculo solar, energia */

  /* ---------- BLUE SCALE (Azul Cerrado) ---------- */
  --blue-50:  #EEF2FB;
  --blue-100: #D8E0F5;
  --blue-200: #B0C0E8;
  --blue-300: #7E95D6;
  --blue-400: #4E6AC0;
  --blue-500: #2E4DA3;
  --blue-600: #1E3A8A;  /* brand */
  --blue-700: #18306F;
  --blue-800: #142655;
  --blue-900: #0F1C3E;

  /* ---------- RUST SCALE (Terracota / Lobo) ---------- */
  --rust-50:  #FCEFE8;
  --rust-100: #F8D8C6;
  --rust-200: #F0AE8C;
  --rust-300: #E58452;
  --rust-400: #D9612A;
  --rust-500: #C2410C;  /* brand */
  --rust-600: #A4360A;
  --rust-700: #832A07;
  --rust-800: #5E1E05;
  --rust-900: #3D1303;

  /* ---------- SUN SCALE (Laranja Sol) ---------- */
  --sun-50:  #FFF5EB;
  --sun-100: #FFE6CC;
  --sun-200: #FECB99;
  --sun-300: #FDB066;
  --sun-400: #FB923C;  /* brand */
  --sun-500: #F97316;
  --sun-600: #DD5F0A;
  --sun-700: #B54908;
  --sun-800: #8A3806;
  --sun-900: #5E2604;

  /* ---------- NEUTRALS (cool slate, harmoniza com o azul) ---------- */
  --white:    #FFFFFF;
  --neutral-50:  #F6F7F9;
  --neutral-100: #ECEEF3;
  --neutral-200: #DCE0E8;
  --neutral-300: #BFC6D4;
  --neutral-400: #97A1B4;
  --neutral-500: #6B7689;
  --neutral-600: #4D5666;
  --neutral-700: #353C49;
  --neutral-800: #222730;
  --neutral-900: #14171D;
  --neutral-950: #0C0E12;  /* near-black — usado no tema escuro (Manual de Copy) */

  /* ---------- SEMANTIC COLOR ROLES ---------- */
  --fg-1: var(--neutral-900);   /* primary text */
  --fg-2: var(--neutral-600);   /* secondary text */
  --fg-3: var(--neutral-400);   /* tertiary / placeholder */
  --fg-on-brand: #FFFFFF;       /* text on blue/rust fills */

  --bg-1: var(--white);         /* page */
  --bg-2: var(--neutral-50);    /* subtle raised */
  --bg-3: var(--neutral-100);   /* sunken / inset */
  --bg-inverse: var(--neutral-950);

  --border-1: var(--neutral-200);
  --border-2: var(--neutral-300);
  --border-strong: var(--neutral-400);

  --primary:       var(--brand-blue);
  --primary-hover: var(--blue-700);
  --primary-press: var(--blue-800);
  --accent:        var(--brand-sun);
  --accent-hover:  var(--sun-500);

  --success: #1F8A5B;
  --success-bg: #E7F4EE;
  --warning: var(--sun-500);
  --warning-bg: var(--sun-50);
  --danger:  #C2410C;           /* rust doubles as danger/alerta */
  --danger-bg: var(--rust-50);
  --info:    var(--brand-blue);
  --info-bg: var(--blue-50);

  /* status pills for logistics states */
  --status-transit:   var(--brand-sun);
  --status-delivered: #1F8A5B;
  --status-pending:   var(--neutral-400);
  --status-issue:     var(--rust-500);

  /* ---------- TYPE FAMILIES ---------- */
  --font-display: 'Bahnschrift', 'Saira Condensed', 'DIN Alternate', sans-serif;
  --font-body:    'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SFMono-Regular', monospace;

  /* ---------- TYPE SCALE (1.250 major third-ish, tuned) ---------- */
  --text-xs:   12px;
  --text-sm:   14px;
  --text-base: 16px;
  --text-lg:   18px;
  --text-xl:   22px;
  --text-2xl:  28px;
  --text-3xl:  36px;
  --text-4xl:  48px;
  --text-5xl:  64px;
  --text-6xl:  84px;

  --leading-tight: 1.05;
  --leading-snug:  1.2;
  --leading-normal: 1.5;
  --leading-relaxed: 1.65;

  --tracking-tight: -0.01em;
  --tracking-normal: 0;
  --tracking-wide: 0.04em;
  --tracking-caps: 0.08em;   /* uppercase labels */

  /* ---------- SPACING (4px base) ---------- */
  --space-1: 4px;   --space-2: 8px;   --space-3: 12px;  --space-4: 16px;
  --space-5: 20px;  --space-6: 24px;  --space-8: 32px;  --space-10: 40px;
  --space-12: 48px; --space-16: 64px; --space-20: 80px; --space-24: 96px;

  /* ---------- RADII ---------- */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-pill: 999px;   /* the brand's signature capsule */

  /* ---------- SHADOWS (cool, low-spread, technical) ---------- */
  --shadow-sm: 0 1px 2px rgba(15, 28, 62, 0.06), 0 1px 1px rgba(15, 28, 62, 0.04);
  --shadow-md: 0 4px 12px rgba(15, 28, 62, 0.08), 0 2px 4px rgba(15, 28, 62, 0.05);
  --shadow-lg: 0 12px 32px rgba(15, 28, 62, 0.12), 0 4px 8px rgba(15, 28, 62, 0.06);
  --shadow-brand: 0 8px 24px rgba(30, 58, 138, 0.22);
  --shadow-accent: 0 8px 24px rgba(251, 146, 60, 0.30);

  /* ---------- MOTION ---------- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);     /* deceleration — "chegada" */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --speed-fast: 140ms;
  --speed-base: 220ms;
  --speed-slow: 360ms;
}

/* ============================================================
   SEMANTIC TYPE CLASSES
   Display = Bahnschrift, often italic(oblique) + uppercase (velocity).
   Body    = Inter.

   IMPORTANT — two scales:
   • h1–h4 below are the PRODUCT / WEB-UI scale (page titles, panels,
     app screens). Tuned DOWN so app headings don't blow up. Use these
     for any real interface.
   • .display-1 / .display-hero are the MARKETING / HERO / DECK scale
     (big, only for landing-page heroes, posters, slides). Do NOT use
     them for in-app page titles.
   ============================================================ */

.display-1, .h0, .display-hero {
  font-family: var(--font-display);
  font-weight: 800;
  font-style: italic;
  font-size: clamp(48px, 6vw, var(--text-6xl)); /* hero / marketing only */
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  text-transform: uppercase;
  color: var(--fg-1);
}

/* ---- Product / web-UI heading scale ---- */
h1, .h1 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 34px;          /* page title (app/web) — was 64px */
  line-height: 1.1;
  letter-spacing: var(--tracking-tight);
  text-transform: uppercase;
  color: var(--fg-1);
}

h2, .h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 26px;          /* section title — was 36px */
  line-height: var(--leading-snug);
  text-transform: uppercase;
  letter-spacing: 0.01em;
  color: var(--fg-1);
}

h3, .h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 21px;          /* sub-section — was 28px */
  line-height: var(--leading-snug);
  color: var(--fg-1);
}

h4, .h4 {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 17px;          /* card / label heading — was 22px */
  line-height: var(--leading-snug);
  color: var(--fg-1);
}

p, .body {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--fg-1);
}

.body-lg { font-family: var(--font-body); font-size: var(--text-lg); line-height: var(--leading-relaxed); color: var(--fg-1); }
.body-sm { font-family: var(--font-body); font-size: var(--text-sm); line-height: var(--leading-normal); color: var(--fg-2); }

.label {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-sm);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: var(--fg-2);
}

.eyebrow {
  font-family: var(--font-display);
  font-weight: 700;
  font-style: italic;
  font-size: var(--text-sm);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: var(--brand-rust);
}

.caption { font-family: var(--font-body); font-size: var(--text-xs); color: var(--fg-3); line-height: var(--leading-normal); }

code, .code, .mono {
  font-family: var(--font-mono);
  font-size: 0.92em;
  letter-spacing: 0.01em;
}

/* tracking code / código de rastreio — the recurring data motif */
.tracking-code {
  font-family: var(--font-mono);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}