/* ==========================================================================
   BAUKO DESIGN SYSTEM — Colors & Type
   Brand owner: Bauko Máquinas (Komatsu / Manitou / Yanmar / Bomag dealer)
   Source: Guia de Aplicação BAUKO (official brand manual)
   --------------------------------------------------------------------------
   Use these variables as the single source of truth. Never hard-code brand
   hex values in components — always reference vars so Dark Mode inverts
   correctly.
   ========================================================================== */

/* -------- FONTS ---------------------------------------------------------- */
@font-face {
  font-family: "Bebas Neue";
  src: url("fonts/BebasNeue-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* DM Mono + Inter load from Google Fonts — drop-in replacements live here
   so any HTML can @import this file and get the full type stack. */
@import url("https://fonts.googleapis.com/css2?family=DM+Mono:wght@300;400;500&family=Inter:wght@300;400;500;600;700&display=swap");


/* -------- ROOT TOKENS (LIGHT — default) ---------------------------------- */
:root {
  /* ---- Brand core (from Guia de Aplicação, sections 0.2 / 0.3) ---- */
  --grn:        #007c44;   /* Pantone 7732C — institutional green */
  --grn-600:    #006638;   /* Hover / pressed */
  --grn-700:    #00502d;   /* Deep green for headers on light */
  --grn-050:    #e6f2ec;   /* Tint — surfaces, subtle bgs */
  --grn-100:    #c2dfcf;   /* Tint — chips, dividers */

  --gry:        #706f6f;   /* Institutional grey (PB mode) */
  --gry-900:    #1a2b1e;   /* Near-black with green undertone — body text */
  --gry-700:    #3c4740;
  --gry-500:    #706f6f;
  --gry-400:    #9a9a9a;
  --gry-300:    #c8ccc9;
  --gry-200:    #e3e6e4;
  --gry-100:    #eef1ef;
  --gry-050:    #f2f5f3;
  --wht:        #ffffff;

  /* ---- Semantic palette (dashboards, simulators) ---- */
  --bg:         #f2f5f3;   /* App background */
  --surface:    #ffffff;   /* Card background */
  --surface-2:  #f7f9f8;   /* Subcard / nested surfaces */
  --border:     #e3e6e4;   /* Card borders — sutis */
  --border-2:   #c8ccc9;   /* Stronger border / dividers */
  --tx:         #1a2b1e;   /* Primary text */
  --tx-2:       #3c4740;   /* Secondary text */
  --tx-3:       #706f6f;   /* Muted / labels */
  --tx-inv:     #ffffff;

  /* Brand accents (for calls to action and data viz) */
  --primary:    var(--grn);
  --primary-tx: #ffffff;

  /* Data / status — yellows for warn, soft red for negative values */
  --warn:       #f4a300;   /* Amarelo Komatsu-ish — alerts / pending */
  --warn-050:   #fff5df;
  --danger:     #c94a4a;   /* Vermelho suave — valores negativos */
  --danger-050: #fbe9e9;
  --ok:         #2e8b57;   /* Positivo (variante mais escura do grn) */
  --ok-050:     #e3f1ea;
  --info:       #3370b7;   /* Info / dnet links */
  --info-050:   #e4eef8;

  /* Data visualization — uses partner brand influences sparingly */
  --dv-1:  #007c44;  /* Bauko green    */
  --dv-2:  #f4a300;  /* Komatsu yellow */
  --dv-3:  #d4202a;  /* Manitou red    */
  --dv-4:  #fdd922;  /* Bomag yellow   */
  --dv-5:  #706f6f;  /* Neutral grey   */
  --dv-6:  #6aa84f;

  /* ---- Elevation (subtle — no drop shadow on logo, soft on cards) ---- */
  --shadow-0: none;
  --shadow-1: 0 1px 2px rgba(0,0,0,.04), 0 1px 3px rgba(0,0,0,.06);
  --shadow-2: 0 2px 6px rgba(0,0,0,.06), 0 4px 14px rgba(0,0,0,.05);
  --shadow-3: 0 6px 20px rgba(0,0,0,.08), 0 12px 40px rgba(0,0,0,.08);
  --shadow-inset: inset 0 0 0 1px var(--border);

  /* ---- Radii (8–10px system; 4 for inputs, 999 for pills) ---- */
  --r-xs: 4px;
  --r-sm: 6px;
  --r-md: 8px;
  --r-lg: 10px;  /* default card radius per brand rules */
  --r-xl: 14px;
  --r-pill: 999px;

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

  /* ---- Typography families ---- */
  --ff-display: "Bebas Neue", "Oswald", "Arial Narrow", sans-serif;
  --ff-mono:    "DM Mono", "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
  --ff-body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* ---- Type scale ---- */
  --fs-display: 72px;  /* KPI gigante */
  --fs-h1:      48px;
  --fs-h2:      32px;
  --fs-h3:      22px;
  --fs-h4:      18px;
  --fs-body:    14px;
  --fs-small:   12px;
  --fs-micro:   11px;

  --lh-tight:   1.05;
  --lh-snug:    1.25;
  --lh-normal:  1.45;

  --ls-display: 0.02em;  /* Bebas is tall & narrow; a hint of tracking helps */
  --ls-caps:    0.06em;  /* Eyebrow / label caps */
  --ls-mono:    0;

  /* ---- Motion ---- */
  --ease:       cubic-bezier(.2,.7,.2,1);
  --t-fast:     120ms;
  --t-med:      220ms;
  --t-slow:     420ms;
}


/* -------- DARK MODE ------------------------------------------------------- */
[data-theme="dark"] {
  --bg:         #0e1410;
  --surface:    #151d18;
  --surface-2:  #1c2621;
  --border:     #263029;
  --border-2:   #324038;
  --tx:         #e8efe9;
  --tx-2:       #c0cac2;
  --tx-3:       #8a9690;
  --tx-inv:     #0e1410;

  --grn-050:    #0f2a1c;
  --grn-100:    #12402a;

  --gry-050:    #151d18;
  --gry-100:    #1c2621;
  --gry-200:    #263029;
  --gry-300:    #324038;

  --shadow-1: 0 1px 2px rgba(0,0,0,.35), 0 1px 3px rgba(0,0,0,.25);
  --shadow-2: 0 2px 6px rgba(0,0,0,.45), 0 4px 14px rgba(0,0,0,.35);
  --shadow-3: 0 6px 20px rgba(0,0,0,.55), 0 12px 40px rgba(0,0,0,.4);

  --warn-050:   #2b200a;
  --danger-050: #2b1514;
  --ok-050:     #0f2a1c;
  --info-050:   #0f1f33;
}


/* -------- BASE / SEMANTIC ELEMENTS --------------------------------------- */
html, body {
  background: var(--bg);
  color: var(--tx);
  font-family: var(--ff-body);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, .display, .kpi {
  font-family: var(--ff-display);
  font-weight: 400;
  letter-spacing: var(--ls-display);
  line-height: var(--lh-tight);
  text-transform: uppercase;
  color: var(--tx);
  margin: 0;
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); letter-spacing: var(--ls-caps); }

.kpi        { font-size: var(--fs-display); line-height: 1; }
.kpi--mono  { font-family: var(--ff-mono); font-size: 52px; letter-spacing: -.01em; }

h4, .eyebrow {
  font-family: var(--ff-body);
  font-weight: 600;
  font-size: var(--fs-h4);
  line-height: var(--lh-snug);
  color: var(--tx);
  margin: 0;
}
.eyebrow {
  font-size: var(--fs-micro);
  text-transform: uppercase;
  letter-spacing: var(--ls-caps);
  color: var(--tx-3);
}

p { margin: 0 0 var(--s-3); color: var(--tx-2); }

code, kbd, samp, .mono, .num {
  font-family: var(--ff-mono);
  font-feature-settings: "tnum" 1, "zero" 1;
}

.num--neg { color: var(--danger); }
.num--pos { color: var(--ok); }
.num--warn { color: var(--warn); }

a { color: var(--grn); text-decoration: none; }
a:hover { color: var(--grn-600); text-decoration: underline; text-underline-offset: 2px; }

hr { border: 0; border-top: 1px solid var(--border); margin: var(--s-4) 0; }

::selection { background: var(--grn-100); color: var(--grn-700); }
[data-theme="dark"] ::selection { background: var(--grn-100); color: var(--wht); }