/* ============================================================================
   MiCapi Design System v0.1 — Tokens
   Razón social: MICAPI S.A.S. | Marca comercial: MiCapi
   ============================================================================ */

/* ---------- WEB FONTS (self-hosted) ----------
   Inter + JetBrains Mono, ambas VARIABLES y en subset latino, servidas desde
   nuestro propio origen. El DS trae aquí un @import al CDN de fuentes de
   Google; en la web pública se reemplaza a propósito — ver tool/sync-ds.sh.
   Ambas son SIL OFL: self-hostearlas está licenciado.

   Variables y no estáticas: un solo archivo cubre 400–700. Cuatro pesos
   estáticos de Inter pesaban ~100 KB; la variable pesa 48 KB y además
   habilita pesos intermedios para el ajuste óptico de los titulares grandes.
*/
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/inter-latin-var.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                 U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F,
                 U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF,
                 U+FFFD;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/jetbrains-mono-latin-var.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                 U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F,
                 U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF,
                 U+FFFD;
}

:root {
  /* ============================================================
     COLOR — PRIMITIVE TOKENS (paleta aprobada — verde petróleo)
     ============================================================ */
  --color-primary-700: #0A3D3A;   /* dark surface / sobre claro */
  --color-primary-500: #0D6B63;   /* ÚNICO color de acción / CTAs / links */
  --color-primary-300: #27A89C;   /* hover, íconos activos */
  --color-primary-100: #C8EDE9;   /* chips / badges info */

  --color-success: #2A8C52;
  --color-warning: #C97A00;
  --color-error:   #C0392B;

  --color-neutral-900: #1A1F1E;
  --color-neutral-800: #2A312F;
  --color-neutral-700: #3A413F;
  --color-neutral-600: #4A5250;
  --color-neutral-500: #6B7370;
  --color-neutral-400: #8A9290;
  --color-neutral-300: #B9C2BF;
  --color-neutral-200: #E4ECEB;
  --color-neutral-100: #EEF3F2;
  --color-neutral-50:  #F2F7F6;
  --color-white: #FFFFFF;

  /* ============================================================
     COLOR — SEMANTIC TOKENS (light mode default)
     ============================================================ */
  --color-bg:               #F2F7F6;
  --color-bg-elevated:      #FFFFFF;
  --color-bg-muted:         #EEF3F2;
  --color-bg-inverse:       #0F1A19;

  --color-fg:               #1A1F1E;        /* texto primario */
  --color-fg-muted:         #4A5250;        /* texto secundario */
  --color-fg-subtle:        #6B7370;        /* hints, captions */
  --color-fg-on-primary:    #FFFFFF;
  --color-fg-inverse:       #E4ECEB;

  --color-border:           #E4ECEB;  /* separadores / cards sobre lienzo (elemento no interactivo) */
  --color-border-strong:    #8A9290;  /* B6: neutral-400 — 3.18:1 AA para borde de controles interactivos */
  --color-border-input:     #8A9290;  /* B6: borde de inputs/selectores — neutral-400, ≥3:1 AA */
  --color-divider:          #E4ECEB;

  --color-action:           #0D6B63;
  --color-action-hover:     #0A554E;
  --color-action-press:     #08443F;
  --color-action-fg:        #FFFFFF;

  --color-link:             #0D6B63;
  --color-link-hover:       #27A89C;

  --color-focus-ring:       #27A89C;

  --color-chip-bg:          #C8EDE9;
  --color-chip-fg:          #0A3D3A;

  --color-success-bg:       #E0F0E7;
  --color-success-fg:       #1F6B3D;
  --color-warning-bg:       #FAEBD3;
  --color-warning-fg:       #8C5500;
  --color-error-bg:         #F5D9D5;
  --color-error-fg:         #8C291E;

  /* ============================================================
     TYPOGRAPHY
     ============================================================ */
  --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', 'Roboto Mono', monospace;

  --font-size-xs:  12px;
  --font-size-sm:  14px;
  --font-size-md:  16px;
  --font-size-lg:  18px;
  --font-size-xl:  22px;
  --font-size-2xl: 28px;
  --font-size-3xl: 36px;

  --font-weight-regular:  400;
  --font-weight-medium:   500;
  --font-weight-semibold: 600;
  --font-weight-bold:     700;

  --line-height-tight:   1.2;   /* headings */
  --line-height-snug:    1.35;  /* subtítulos */
  --line-height-normal:  1.5;   /* body — mínimo WCAG */
  --line-height-relaxed: 1.7;   /* párrafos largos */

  --letter-spacing-tight:   -0.01em;
  --letter-spacing-normal:  0;
  --letter-spacing-wide:    0.02em;

  /* ============================================================
     SPACING — base 4px
     ============================================================ */
  --space-0:  0;
  --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;

  /* ============================================================
     RADII
     ============================================================ */
  --radius-sm:   6px;   /* chips, badges */
  --radius-md:   10px;  /* botones, inputs */
  --radius-lg:   12px;  /* cards, modales */
  --radius-xl:   16px;  /* sheets */
  --radius-pill: 999px;

  /* ============================================================
     ELEVATION
     ============================================================ */
  --elev-1: 0 1px 2px rgba(10, 61, 58, 0.06);
  --elev-2: 0 4px 12px rgba(10, 61, 58, 0.08);
  --elev-3: 0 12px 32px rgba(10, 61, 58, 0.12);

  /* ============================================================
     MOTION
     ============================================================ */
  /* Canonical (Flutter brief — Duration tokens) */
  --motion-duration-fast:    100ms;  /* @kind other */  /* Press feedback, ripple, toggle, checkbox · Duration(milliseconds: 100). El checkbox sigue vivo (B7): TyC en registro, titularidad en wallet-register, gate de monto alto en confirmation-sheet — A16 solo lo retiró del retiro cripto. */
  --motion-duration-default: 200ms;  /* @kind other */  /* Fade, slide corto, color, crossfade skeleton→real · Duration(milliseconds: 200) */
  --motion-duration-modal:   300ms;  /* @kind other */  /* Bottom sheet enter/exit, modal overlay, drawer · Duration(milliseconds: 300) */
  --motion-duration-slow:    350ms;  /* @kind other */  /* Page transition, chart reveal, list stagger · Duration(milliseconds: 350) */

  /* Aliases — back-compat con v0.1 inicial. No usar en código nuevo. */
  --motion-duration-base:   var(--motion-duration-default);
  --motion-duration-medium: var(--motion-duration-modal);

  /* Easing — mapeo a Curves de Flutter */
  --motion-ease:            cubic-bezier(0.4, 0.0, 0.2, 1.0);     /* @kind other */  /* Curves.fastOutSlowIn — default Material 3 */
  --motion-ease-standard:   cubic-bezier(0.4, 0.0, 0.2, 1.0);     /* @kind other */  /* Curves.fastOutSlowIn */
  --motion-ease-drawer:     cubic-bezier(0.215, 0.61, 0.355, 1);  /* @kind other */  /* Curves.easeOutCubic — sheets/drawers entrando */
  --motion-ease-accelerate: cubic-bezier(0.42, 0, 1, 1);          /* @kind other */  /* Curves.easeIn — exits, dismiss */

  /* ============================================================
     LAYOUT
     ============================================================ */
  --container-max:    1200px;
  --container-narrow: 720px;
  --touch-target:     44px;     /* WCAG / iOS min */

  /* ============================================================
     SURFACE PHILOSOPHY — "Canvas-first" (v0.2 directive)
     ----------------------------------------------------------------
     Por defecto la app es un lienzo blanco. Las secciones se separan
     con espacio y hairlines, no con cards. Ver README §4.X.
     ============================================================ */
  --surface-canvas:        #FFFFFF;   /* fondo principal de la app */
  --surface-contained:     #FFFFFF;   /* superficie de una card cuando se necesita */
  --divider-hairline:      #F0F4F3;   /* línea entre secciones en canvas blanco */
  --divider-section:       #E4ECEB;   /* línea más visible cuando se necesita peso */

  --field-bg-canvas:       transparent;     /* campo en modo borderless */
  --field-bg-contained:    #FFFFFF;          /* campo dentro de una card */
  --field-border-canvas:   transparent;     /* sin borde — confiamos en tipografía + hairline */
  --field-border-contained:#8A9290;         /* B6: neutral-400 (3.18:1) — antes #E4ECEB fallaba AA como borde de control */
}

/* ============================================================
   DARK MODE
   ============================================================ */
[data-theme="dark"] {
  --color-bg:            #0F1A19;
  --color-bg-elevated:   #16221F;
  --color-bg-muted:      #1A2826;
  --color-bg-inverse:    #F2F7F6;

  --color-fg:            #E4ECEB;
  --color-fg-muted:      #B9C2BF;
  --color-fg-subtle:     #8A9290;
  --color-fg-on-primary: #FFFFFF;
  --color-fg-inverse:    #1A1F1E;

  --color-border:        #2A3633;
  --color-border-strong: #6B7370;   /* B6: neutral-500 — borde de control visible/AA sobre lienzo oscuro */
  --color-border-input:  #6B7370;   /* B6: borde de inputs en dark — ≥3:1 */
  --color-divider:       #2A3633;

  --color-action:        #0D6B63;
  --color-action-hover:  #27A89C;
  --color-action-press:  #1E8278;

  --color-link:          #27A89C;
  --color-link-hover:    #5BC5BB;

  --color-chip-bg:       rgba(39, 168, 156, 0.18);
  --color-chip-fg:       #C8EDE9;

  --color-success-bg:    rgba(42, 140, 82, 0.18);
  --color-success-fg:    #6BC892;
  --color-warning-bg:    rgba(201, 122, 0, 0.18);
  --color-warning-fg:    #E8AE4D;  --color-error-bg:      rgba(192, 57, 43, 0.18);
  --color-error-fg:      #E88E83;

  --elev-1: 0 1px 2px rgba(0, 0, 0, 0.4);
  --elev-2: 0 4px 12px rgba(0, 0, 0, 0.5);
  --elev-3: 0 12px 32px rgba(0, 0, 0, 0.6);
}

/* ============================================================
   GLOBAL ELEMENT DEFAULTS — semantic
   ============================================================ */
html {
  font-family: var(--font-sans);
  font-size: var(--font-size-md);
  line-height: var(--line-height-normal);
  color: var(--color-fg);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  margin: 0;
  font-feature-settings: 'cv11', 'ss01';  /* Inter alt 1 / single-storey g */
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-sans);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--letter-spacing-tight);
  line-height: var(--line-height-tight);
  color: var(--color-fg);
  margin: 0;
}

h1 { font-size: var(--font-size-3xl); }
h2 { font-size: var(--font-size-2xl); }
h3 { font-size: var(--font-size-xl); }
h4 { font-size: var(--font-size-lg); }
h5 { font-size: var(--font-size-md); font-weight: var(--font-weight-semibold); }
h6 { font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); text-transform: none; letter-spacing: var(--letter-spacing-wide); }

p {
  margin: 0;
  font-size: var(--font-size-md);
  line-height: var(--line-height-normal);
  color: var(--color-fg);
}

small, .caption {
  font-size: var(--font-size-sm);
  color: var(--color-fg-muted);
}

.hint, .legal {
  font-size: var(--font-size-xs);
  color: var(--color-fg-subtle);
  line-height: var(--line-height-normal);
}

code, kbd, samp, pre, .mono {
  font-family: var(--font-mono);
}

a {
  color: var(--color-link);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color var(--motion-duration-fast) var(--motion-ease),
              border-color var(--motion-duration-fast) var(--motion-ease);
}
a:hover { color: var(--color-link-hover); border-bottom-color: currentColor; }
a:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 2px;
  border-radius: 2px;
}

/* ============================================================
   MONETARY DISPLAY — tabular numerals
   ============================================================ */
.money,
.crypto-amount,
.wallet-address,
.tx-hash {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}

/* ============================================================
   FOCUS RING — visible for keyboard navigation (WCAG 2.1 AA)
   ============================================================ */
:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 2px;
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}