/* =============================================================
   LVL Trading — Tokens base + semânticos
   ============================================================= */

/* Webfonts: Ubuntu (principal) + Montserrat (apoio).
   Substituídas pelo Google Fonts até receber arquivos .ttf oficiais. */
@import url('https://fonts.googleapis.com/css2?family=Ubuntu:wght@300;400;500;700&family=Montserrat:wght@400;500;600;700&display=swap');

:root {
  /* ---------- COLOR — base ---------- */
  --lvl-navy:        #223058;  /* primária */
  --lvl-blue:        #4FA8DF;  /* secundária */
  --lvl-blue-mid:    #1068A7;  /* apoio médio */
  --lvl-blue-deep:   #1E3E72;  /* apoio profundo */
  --lvl-neutral:     #919191;
  --lvl-white:       #FFFFFF;
  --lvl-black:       #0B1126;  /* preto institucional, deslocado pro navy */

  /* Tons derivados (usar com moderação) */
  --lvl-navy-90:     rgba(34,48,88, 0.90);
  --lvl-navy-60:     rgba(34,48,88, 0.60);
  --lvl-navy-08:     rgba(34,48,88, 0.08);
  --lvl-blue-12:     rgba(79,168,223, 0.12);
  --lvl-white-10:    rgba(255,255,255, 0.10);
  --lvl-white-70:    rgba(255,255,255, 0.70);

  /* Cinza-azulado para superfícies neutras (derivado de #223058) */
  --lvl-bg-mist:     #F4F6FA;
  --lvl-bg-cool:     #E8EDF5;
  --lvl-line:        #DCE3EE;

  /* Campanhas excepcionais (uso aprovado, não-institucional) */
  --lvl-campaign-grad-from: #E3EEF7;
  --lvl-campaign-grad-to:   #EDE7F6;
  --lvl-gold:        #D4AF37;
  --lvl-purple:      #8B5CF6;

  /* Operacionais (sinalização — usar com critério, sempre com label) */
  --lvl-success:     #2BA66B;
  --lvl-danger:      #D9434E;
  --lvl-warning:     #E6A623;
  --lvl-whatsapp:    #25D366;

  /* ---------- COLOR — semântico (light surface) ---------- */
  --bg:              var(--lvl-white);
  --bg-elev:         var(--lvl-bg-mist);
  --bg-inverse:      var(--lvl-navy);

  --fg-1:            var(--lvl-navy);          /* títulos, texto principal */
  --fg-2:            #3D4A6E;                  /* texto secundário em fundo claro */
  --fg-3:            var(--lvl-neutral);       /* legendas, captions */
  --fg-on-dark:      var(--lvl-white);
  --fg-on-dark-2:    rgba(255,255,255, 0.72);

  --accent:          var(--lvl-blue);
  --accent-hover:    var(--lvl-blue-mid);
  --accent-press:    #0A578D;

  --link:            var(--lvl-blue-mid);
  --link-hover:      var(--lvl-navy);

  --border:          var(--lvl-line);
  --border-strong:   var(--lvl-navy-08);
  --focus-ring:      var(--lvl-blue);

  /* ---------- TYPOGRAPHY — base ---------- */
  --font-display:    'Ubuntu', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body:       'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:       ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  --weight-light:    300;
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semi:     600;
  --weight-bold:     700;

  --leading-tight:   1.12;
  --leading-snug:    1.28;
  --leading-normal:  1.5;
  --leading-relaxed: 1.65;

  --tracking-tight:  -0.015em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;
  --tracking-cta:    0.06em;

  /* ---------- SPACING (8pt grid) ---------- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;
  --space-9:  96px;
  --space-10: 128px;

  /* ---------- RADIUS ---------- */
  --radius-0:    0;
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   20px;
  --radius-pill: 999px;

  /* ---------- SHADOW ---------- */
  --shadow-sm:  0 1px 2px rgba(34,48,88,0.06);
  --shadow-md:  0 4px 12px rgba(34,48,88,0.08);
  --shadow-lg:  0 12px 32px rgba(34,48,88,0.14);
  --shadow-xl:  0 24px 64px rgba(34,48,88,0.18);
  --shadow-cta: 0 6px 18px rgba(79,168,223,0.32);
  --shadow-inset-line: inset 0 -1px 0 var(--border);

  /* ---------- MOTION ---------- */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast:   150ms;
  --dur-base:   250ms;
  --dur-slow:   400ms;

  /* ---------- LAYOUT ---------- */
  --container-narrow: 760px;
  --container:        1120px;
  --container-wide:   1280px;
}

/* Inverse surface (navy) — semantic flip */
.surface-dark,
[data-surface="dark"] {
  --bg: var(--lvl-navy);
  --bg-elev: var(--lvl-blue-deep);
  --fg-1: var(--lvl-white);
  --fg-2: rgba(255,255,255, 0.78);
  --fg-3: rgba(255,255,255, 0.55);
  --border: rgba(255,255,255, 0.10);
  --link: var(--lvl-blue);
  --link-hover: var(--lvl-white);
  color: var(--fg-1);
  background: var(--bg);
}

/* =============================================================
   Semantic typography classes — h1, h2, p, code, etc.
   ============================================================= */

.t-display {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: clamp(48px, 6vw, 72px);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
}

.t-h1, h1 {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: clamp(32px, 4vw, 48px);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
}

.t-h2, h2 {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: clamp(24px, 2.4vw, 32px);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
}

.t-h3, h3 {
  font-family: var(--font-display);
  font-weight: var(--weight-medium);
  font-size: clamp(18px, 2vw, 20px);
  line-height: var(--leading-snug);
  color: var(--fg-1);
}

.t-eyebrow {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: var(--tracking-cta);
  color: var(--accent);
}

.t-lead {
  font-family: var(--font-body);
  font-weight: var(--weight-regular);
  font-size: 18px;
  line-height: var(--leading-relaxed);
  color: var(--fg-2);
}

.t-body, p {
  font-family: var(--font-body);
  font-weight: var(--weight-regular);
  font-size: 15px;
  line-height: var(--leading-relaxed);
  color: var(--fg-2);
}

.t-body-strong {
  font-weight: var(--weight-semi);
  color: var(--fg-1);
}

.t-caption, small {
  font-family: var(--font-body);
  font-weight: var(--weight-medium);
  font-size: 12px;
  line-height: var(--leading-normal);
  color: var(--fg-3);
}

.t-cta {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: 14px;
  letter-spacing: var(--tracking-cta);
  text-transform: uppercase;
}

.t-mono, code, pre, kbd {
  font-family: var(--font-mono);
  font-size: 13px;
}

.t-quote {
  font-family: var(--font-display);
  font-weight: var(--weight-light);
  font-size: clamp(22px, 2.2vw, 30px);
  line-height: var(--leading-snug);
  color: var(--fg-1);
}

/* Numerals (números são protagonistas na LVL — repasses, anos, volume) */
.t-stat {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: clamp(40px, 5vw, 64px);
  line-height: 1;
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
  font-variant-numeric: tabular-nums;
}

/* Reset gentil */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
body { margin: 0; font-family: var(--font-body); color: var(--fg-1); background: var(--bg); }
a { color: var(--link); text-decoration: none; transition: color var(--dur-base) var(--ease-standard); }
a:hover { color: var(--link-hover); }
:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }