/* ============================================================
   EL FISURA™ — design tokens v2 "megacorp"
   Dirección: mega-tech seria estilo keynote — claro, pulido,
   solemne. El chiste ahora es la solemnidad: una corporación
   premium vendiendo la piel de un fisura.
   Excepción deliberada: EL TICKER queda como era (isla oscura
   de mercado con verde/rojo) — tokens --ticker-* propios.
   Tipos: Archivo variable (todo) · IBM Plex Mono (ticker/datos).
   ============================================================ */

:root {
  color-scheme: light;

  /* ---- color: fondo ---- */
  --bg-0: #fbfbfd;            /* página */
  --bg-1: #ffffff;            /* superficie / cards flotantes */
  --bg-2: #f5f5f7;            /* wells, cards de sección, inputs */
  --bg-3: #e8e8ed;            /* hover de well / piso del stage */
  --bg-inverse: #1d1d1f;

  /* ---- color: texto ---- */
  --text-1: #1d1d1f;          /* principal */
  --text-2: #6e6e73;          /* secundario */
  --text-3: #86868b;          /* terciario / placeholder */
  --text-inverse: #ffffff;

  /* ---- color: bordes ---- */
  --line-1: #d2d2d7;          /* hairline */
  --line-2: #b9b9c0;          /* marcado */
  --line-focus: var(--azul);

  /* ---- color: acentos ---- */
  --azul: #0071e3;            /* la acción: CTAs, links, gizmo, selección */
  --azul-hover: #0077ed;
  --azul-active: #006edb;
  --azul-dim: rgba(0, 113, 227, .10);
  --rojo: #e30000;            /* aplastar / peligro */
  --rojo-hover: #f52f2f;
  --rojo-dim: rgba(227, 0, 0, .08);
  --verde-plata: #068a52;     /* montos sobre claro (feed) */
  --ambar: #b25000;           /* avisos (borde deformante) */
  --ambar-dim: rgba(178, 80, 0, .10);

  --overlay: rgba(0, 0, 0, .48);          /* backdrop de hojas */
  --piel: #d8b596;

  /* ---- la isla del ticker: NO se rebrandea ---- */
  --ticker-bg: rgba(9, 9, 11, .92);
  --ticker-line: #26262d;
  --ticker-text: #f2efe6;
  --ticker-sep: #66645c;
  --ticker-verde: #2ee06b;
  --ticker-rojo: #ff2b47;

  /* ---- tipografía ---- */
  --font-display: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --font-body: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'IBM Plex Mono', 'Consolas', monospace;

  --fs-2xs: .6875rem;   /* 11 */
  --fs-xs: .75rem;      /* 12 */
  --fs-sm: .875rem;     /* 14 */
  --fs-base: 1.0625rem; /* 17 — cuerpo keynote */
  --fs-md: 1.1875rem;   /* 19 */
  --fs-lg: 1.375rem;    /* 22 */
  --fs-xl: 1.75rem;     /* 28 */
  --fs-2xl: clamp(2rem, 5vw, 3rem);         /* títulos de sección */
  --fs-3xl: clamp(2.6rem, 7.5vw, 4.6rem);   /* hero */
  --fs-num: clamp(1.9rem, 6vw, 2.9rem);     /* la cotización */

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 640;         /* Archivo variable */
  --fw-bold: 700;

  --lh-display: 1.06;
  --lh-tight: 1.2;
  --lh-normal: 1.5;

  --ls-display: -0.018em;     /* tracking apretado de keynote */
  --ls-normal: 0;
  --ls-label: .1em;           /* microlabels mono (ticker/datos) */

  /* ---- espaciado (base 4) ---- */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px;
  --sp-9: 96px; --sp-10: 128px;

  /* ---- layout ---- */
  --w-content: 720px;
  --w-wide: 1040px;
  --w-page: 1440px;

  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 18px;
  --r-pill: 980px;            /* botones */
  --r-full: 999px;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .06);
  --shadow-md: 0 4px 20px rgba(0, 0, 0, .10);
  --shadow-lg: 0 16px 48px rgba(0, 0, 0, .16);
  --shadow-focus: 0 0 0 4px rgba(0, 113, 227, .28);

  /* ---- movimiento (suave, discreto) ---- */
  --t-instant: 60ms;
  --t-fast: 150ms;
  --t-normal: 260ms;
  --t-slow: 420ms;
  --t-slower: 700ms;

  --ease: cubic-bezier(.32, .08, .24, 1);
  --ease-in: cubic-bezier(.5, 0, .8, .4);
  --ease-out: cubic-bezier(0, .5, .2, 1);
  --ease-stamp: cubic-bezier(.34, 1.45, .64, 1);

  /* ---- z ---- */
  --z-stage-ui: 5;
  --z-topbar: 20;
  --z-sheet: 40;
  --z-toast: 60;

  /* breakpoints de referencia: sm 375 · md 768 · lg 1024 · xl 1280 */
}