/* =========================================================================
   NETO · Design Tokens
   Colors, Type, Spacing, Radii, Shadows, Motion
   ---
   Brand: accessibility software for platform drivers (Uber, Cabify, Didi).
   Voice: trustworthy, pragmatic, pro-driver, Spanish-first.
   Vibe: financial dashboard meets driver tool — clear, calm, decisive.
   ========================================================================= */

/* --- Fonts ----------------------------------------------------------------
   Display / UI: Inter (Google Fonts, open source).
   Mono / Numbers: JetBrains Mono — used for monetary figures and data.
   If local .ttf/.otf are dropped in /fonts, they will take precedence via
   the @font-face rules below.
-------------------------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600;700&display=swap');

:root {
  /* ====== BRAND PALETTE — extracted from the logo ====== */
  --neto-navy:        #3B495C;   /* primary dark (logo background) */
  --neto-green:       #0AAE4D;   /* primary accent (arrow / profit) */
  --neto-white:       #FFFFFF;   /* mark / surfaces on navy */

  /* ====== NAVY SCALE (cool slate, neutral-tinted) ====== */
  --navy-950: #141922;
  --navy-900: #1F2732;
  --navy-800: #2A3441;
  --navy-700: #3B495C;  /* === brand navy === */
  --navy-600: #4C5B70;
  --navy-500: #607082;
  --navy-400: #8290A2;
  --navy-300: #A7B2C0;
  --navy-200: #CDD3DC;
  --navy-100: #E6E9EE;
  --navy-050: #F3F5F8;

  /* ====== GREEN SCALE (profit / growth) ====== */
  --green-900: #064A22;
  --green-800: #086A31;
  --green-700: #098A40;
  --green-600: #0AAE4D;  /* === brand green === */
  --green-500: #2FC368;
  --green-400: #5FD489;
  --green-300: #8FE2AB;
  --green-200: #BEEECE;
  --green-100: #E1F6E8;
  --green-050: #F1FBF4;

  /* ====== SEMANTIC — Financial ====== */
  --profit:     var(--green-600);   /* "neto positivo" */
  --profit-bg:  var(--green-100);
  --loss:       #E23B3B;            /* "neto negativo" */
  --loss-bg:    #FDECEC;
  --neutral:    var(--navy-500);    /* break-even */
  --warning:    #F5A524;            /* surge / caution */
  --warning-bg: #FEF3DA;
  --info:       #3B82F6;            /* informational */
  --info-bg:    #E8F0FE;

  /* ====== SURFACES (light mode default) ====== */
  --bg:          #F7F8FA;           /* page background */
  --bg-elevated: #FFFFFF;           /* cards / sheets */
  --bg-sunken:   #EEF1F5;           /* inset fields */
  --bg-overlay:  rgba(20, 25, 34, 0.55); /* modal scrim */

  /* ====== FOREGROUNDS ====== */
  --fg-1: var(--navy-900);          /* primary text */
  --fg-2: var(--navy-600);          /* secondary text */
  --fg-3: var(--navy-400);          /* tertiary / placeholder */
  --fg-invert: #FFFFFF;             /* text on navy/green */
  --fg-accent: var(--green-600);

  /* ====== BORDERS ====== */
  --border-subtle: var(--navy-100);
  --border:        var(--navy-200);
  --border-strong: var(--navy-300);
  --border-focus:  var(--green-600);

  /* ====== OVERLAY SYSTEM (Neto is an overlay app) ====== */
  --overlay-card-bg:       rgba(31, 39, 50, 0.94);  /* navy-900 at 94% — what sits on top of Uber/DiDi */
  --overlay-card-border:   rgba(255, 255, 255, 0.08);
  --overlay-card-shadow:   0 8px 24px rgba(0, 0, 0, 0.35), 0 2px 6px rgba(0, 0, 0, 0.25);
  --overlay-handle:        rgba(255, 255, 255, 0.2);

  /* ====== TYPE — Families ====== */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', 'Roboto Mono', Menlo, monospace;
  --font-display: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

  /* ====== TYPE — Scale (mobile-first, tuned for driver legibility) ====== */
  --text-2xs:  11px;  /* chip labels, fine print */
  --text-xs:   12px;  /* metadata */
  --text-sm:   14px;  /* secondary UI */
  --text-base: 16px;  /* body */
  --text-md:   18px;  /* card values */
  --text-lg:   22px;  /* section titles */
  --text-xl:   28px;  /* big numbers on overlay */
  --text-2xl:  36px;  /* hero figures */
  --text-3xl:  48px;  /* marketing headlines */
  --text-4xl:  64px;

  /* ====== LINE HEIGHTS ====== */
  --lh-tight:  1.1;
  --lh-snug:   1.25;
  --lh-normal: 1.4;
  --lh-relaxed: 1.55;

  /* ====== WEIGHTS ====== */
  --w-regular:  400;
  --w-medium:   500;
  --w-semibold: 600;
  --w-bold:     700;
  --w-black:    800;

  /* ====== TRACKING ====== */
  --track-tight:  -0.02em;
  --track-normal: 0;
  --track-wide:   0.04em;
  --track-caps:   0.08em;

  /* ====== SPACING (4pt grid) ====== */
  --s-0:  0px;
  --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;
  --s-20: 80px;
  --s-24: 96px;

  /* ====== RADII ====== */
  --r-xs:   4px;
  --r-sm:   6px;
  --r-md:   10px;   /* default card */
  --r-lg:   14px;   /* overlay card */
  --r-xl:   20px;   /* sheet */
  --r-full: 9999px; /* pill / avatar */

  /* ====== SHADOWS ====== */
  --shadow-xs: 0 1px 2px rgba(20, 25, 34, 0.05);
  --shadow-sm: 0 1px 3px rgba(20, 25, 34, 0.08), 0 1px 2px rgba(20, 25, 34, 0.04);
  --shadow-md: 0 4px 12px rgba(20, 25, 34, 0.08), 0 2px 4px rgba(20, 25, 34, 0.04);
  --shadow-lg: 0 12px 32px rgba(20, 25, 34, 0.12), 0 4px 8px rgba(20, 25, 34, 0.06);
  --shadow-overlay: 0 8px 24px rgba(0, 0, 0, 0.35), 0 2px 6px rgba(0, 0, 0, 0.25);
  --shadow-focus: 0 0 0 3px rgba(10, 174, 77, 0.3);

  /* ====== MOTION ====== */
  --ease-out:  cubic-bezier(0.2, 0.8, 0.2, 1);   /* default UI easing */
  --ease-in:   cubic-bezier(0.6, 0, 1, 0.4);
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:   120ms;
  --dur-base:   200ms;
  --dur-slow:   320ms;
}

/* =========================================================================
   SEMANTIC ELEMENT STYLES
   ========================================================================= */
html, body {
  font-family: var(--font-sans);
  color: var(--fg-1);
  background: var(--bg);
  font-size: var(--text-base);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, .h1 {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  line-height: var(--lh-tight);
  font-weight: var(--w-bold);
  letter-spacing: var(--track-tight);
  color: var(--fg-1);
  margin: 0;
}
h2, .h2 {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  line-height: var(--lh-tight);
  font-weight: var(--w-bold);
  letter-spacing: var(--track-tight);
  margin: 0;
}
h3, .h3 {
  font-size: var(--text-xl);
  line-height: var(--lh-snug);
  font-weight: var(--w-semibold);
  letter-spacing: var(--track-tight);
  margin: 0;
}
h4, .h4 {
  font-size: var(--text-lg);
  line-height: var(--lh-snug);
  font-weight: var(--w-semibold);
  margin: 0;
}
p {
  font-size: var(--text-base);
  line-height: var(--lh-relaxed);
  color: var(--fg-2);
  margin: 0;
}
small, .caption {
  font-size: var(--text-sm);
  color: var(--fg-3);
  line-height: var(--lh-normal);
}
.eyebrow {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--track-caps);
  font-weight: var(--w-semibold);
  color: var(--fg-accent);
}
.numeric, .mono {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}
.amount {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-weight: var(--w-semibold);
  letter-spacing: var(--track-tight);
}
code {
  font-family: var(--font-mono);
  font-size: 0.92em;
  background: var(--bg-sunken);
  padding: 2px 6px;
  border-radius: var(--r-xs);
  color: var(--fg-1);
}