/* ============================================================
   Lexxen — Design System (tokens + base)
   Identidade visual: azul elétrico #1917FF, Hanken Grotesk + Spline Sans Mono,
   cantos suaves (Revolut-leaning), sombras frias (Stripe-grade), light-first.
   Fonte única de verdade compartilhada por /docs e a home.
   Gerado a partir do bundle Claude Design (lexxen-design-system).
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@400;500;600;700;800&family=Spline+Sans+Mono:wght@400;500;600;700&display=swap');

/* ---- Color tokens (electric-blue fintech, light-first) ---- */
:root {
  /* Brand: electric indigo-blue scale */
  --indigo-50:  #EEEFFF;
  --indigo-100: #E0E0FF;
  --indigo-200: #C5C5FF;
  --indigo-300: #9D9CFF;
  --indigo-400: #6663FF;
  --indigo-500: #1917FF;   /* brand primary — logo */
  --indigo-600: #110FD6;
  --indigo-700: #0E0CAB;
  --indigo-800: #0C0B85;
  --indigo-900: #0A0A5C;

  /* Neutral: cool ink / slate scale */
  --white:    #FFFFFF;
  --slate-25:  #FBFBFD;
  --slate-50:  #F6F7FB;
  --slate-100: #EEF0F6;
  --slate-150: #E4E7F0;
  --slate-200: #D7DBE8;
  --slate-300: #BCC2D6;
  --slate-400: #9097B0;
  --slate-500: #6B7290;
  --slate-600: #4C5470;
  --slate-700: #353C56;
  --slate-800: #232942;
  --slate-900: #161B30;
  --ink:       #0A0E27;   /* near-black brand navy */
  --ink-deep:  #060818;

  /* Semantic hues */
  --green-50:  #E4F8F0;
  --green-100: #C2EFDD;
  --green-500: #00B37E;   /* gains / buy / success */
  --green-600: #009E6E;
  --green-700: #007A55;

  --red-50:  #FDECEC;
  --red-100: #FAD6D7;
  --red-500: #E5484D;     /* losses / sell / danger */
  --red-600: #D13B40;
  --red-700: #B01D22;

  --amber-50:  #FFF4E0;
  --amber-100: #FFE6BB;
  --amber-500: #F5A623;   /* warning / pending */
  --amber-600: #DB8A0A;

  --sky-50:  #E0F2FE;
  --sky-100: #BAE6FD;
  --sky-500: #0BA5EC;     /* info */
  --sky-600: #0284C7;

  /* PIX (Brazilian instant payments) brand teal */
  --pix-bg:  #E3F7F4;
  --pix:     #32BCAD;
  --pix-600: #1FA396;

  /* Crypto brand accents */
  --c-btc:  #F7931A;
  --c-eth:  #627EEA;
  --c-usdt: #26A17B;
  --c-usdc: #2775CA;
  --c-sol:  #00D18C;
  --c-bnb:  #F0B90B;

  /* ---- Semantic aliases ---- */
  --brand:         var(--indigo-500);
  --brand-hover:   var(--indigo-600);
  --brand-press:   var(--indigo-700);
  --brand-subtle:  var(--indigo-50);
  --brand-on:      var(--white);

  --buy:   var(--green-500);
  --sell:  var(--red-500);

  --surface-page:    var(--slate-50);
  --surface-card:    var(--white);
  --surface-raised:  var(--white);
  --surface-sunken:  var(--slate-100);
  --surface-inverse: var(--ink);
  --surface-brand:   var(--brand);
  --surface-overlay: rgba(10, 14, 39, 0.55);

  --positive-bg: var(--green-50);
  --negative-bg: var(--red-50);
  --warning-bg:  var(--amber-50);
  --info-bg:     var(--sky-50);

  --text-strong:  var(--ink);
  --text-body:    var(--slate-800);
  --text-muted:   var(--slate-500);
  --text-subtle:  var(--slate-400);
  --text-inverse: var(--white);
  --text-brand:   var(--brand-hover);

  --border:        var(--slate-150);
  --border-strong: var(--slate-300);
  --border-brand:  var(--brand);

  --data-up:   var(--green-500);
  --data-down: var(--red-500);

  --ring: 0 0 0 3px rgba(25, 23, 255, 0.28);

  /* ---- Doc theme: light values (dark overrides applied inline by the docs runtime) ---- */
  --doc-text-muted: #6B7290; /* slate-500: legível no tema claro (AA) */

  /* ---- Typography ---- */
  --font-sans: 'Hanken Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-mono: 'Spline Sans Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
  --fw-black:    800;

  --text-2xs:  11px;
  --text-xs:   12px;
  --text-sm:   13px;
  --text-base: 15px;
  --text-md:   16px;
  --text-lg:   17px;
  --text-xl:   20px;
  --text-2xl:  24px;
  --text-3xl:  30px;
  --text-4xl:  38px;
  --text-5xl:  48px;

  --lh-tight:   1.1;
  --lh-snug:    1.25;
  --lh-normal:  1.45;
  --lh-relaxed: 1.6;

  --ls-tighter: -0.03em;
  --ls-tight:   -0.015em;
  --ls-normal:  0;
  --ls-wide:    0.02em;
  --ls-overline:0.08em;

  /* ---- Spacing & sizing (8px grid) ---- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-7:  32px;
  --space-8:  40px;
  --space-9:  48px;
  --space-10: 64px;
  --space-11: 80px;
  --touch-min:    44px;
  --control-h-lg: 56px;

  /* ---- Effects: radii, shadows, blur ---- */
  --radius-xs:   6px;
  --radius-sm:   10px;
  --radius-md:   14px;
  --radius-lg:   18px;
  --radius-xl:   24px;
  --radius-2xl:  32px;
  --radius-pill: 999px;
  --radius-full: 999px;

  --shadow-xs:  0 1px 2px rgba(10, 14, 39, 0.06);
  --shadow-sm:  0 1px 3px rgba(10, 14, 39, 0.08), 0 1px 2px rgba(10, 14, 39, 0.04);
  --shadow-md:  0 4px 12px rgba(10, 14, 39, 0.08), 0 2px 4px rgba(10, 14, 39, 0.04);
  --shadow-lg:  0 12px 28px rgba(10, 14, 39, 0.12), 0 4px 8px rgba(10, 14, 39, 0.05);
  --shadow-xl:  0 24px 56px rgba(10, 14, 39, 0.18), 0 8px 16px rgba(10, 14, 39, 0.06);
  --shadow-brand:    0 8px 24px rgba(25, 23, 255, 0.30);
  --shadow-brand-sm: 0 2px 8px rgba(25, 23, 255, 0.24);
  --blur-glass: blur(20px) saturate(140%);

  /* ---- Motion ---- */
  --dur-instant: 80ms;
  --dur-fast:    140ms;
  --dur-base:    220ms;
  --dur-slow:    360ms;
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:       cubic-bezier(0.4, 0, 1, 1);
  --ease-spring:   cubic-bezier(0.34, 1.56, 0.64, 1);
  --press-scale:   0.97;
}

/* ---- Base reset & document defaults ---- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--text-md);
  line-height: var(--lh-normal);
  color: var(--text-body);
  background: var(--surface-page);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
h1, h2, h3, h4, h5, h6, p, figure { margin: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: var(--text-brand); text-decoration: none; }
::selection { background: var(--indigo-200); color: var(--ink); }

/* Utilities */
.lx-figure { font-family: var(--font-mono); font-variant-numeric: tabular-nums; letter-spacing: var(--ls-tight); }
.tnum { font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}