/* ============================================================
   MarketView — Design Tokens
   Fuente única de verdad: color, tipografía, espacio, motion.
   ============================================================ */

:root {
  /* ---- COLOR: capítulo oscuro (cockpit) ----
     Slide temperature cool to mirror xQuant's slate-950 family
     (xquant-styles.json base.bodyBg = #020617). The warm near-black
     #040508 was reading "boutique SaaS"; the new slate-950 reads
     "trading floor without losing the Trionn editorial feel." */
  --c-bg:           #020617;                            /* was #040508 — slate-950 */
  --c-bg-elev:      #0B0F1A;                            /* was #0B0D12 */
  --c-bg-elev-2:    #14171E;                            /* unchanged */
  --c-line:         rgba(255, 255, 255, 0.06);          /* was #16191F — match xquant hairline */
  --c-line-strong:  rgba(255, 255, 255, 0.12);          /* was #2A2E38 — match xquant */
  --c-text:         #E2E8F0;                            /* was #F4F2ED — slate-200 */
  --c-text-muted:   #94A3B8;                            /* was #9A9CA3 — slate-400 */
  --c-text-dim:     #64748B;                            /* was #5F626B — slate-500 */

  /* ---- COLOR: capítulo claro (sheet editorial) ----
     Intentionally warm. The light sheet is the visual counterweight
     to the cool dark cockpit — flattening it would kill the
     alternating-chapter rhythm that IS the Trionn move. */
  --c-light-top:    #FFFFFF;
  --c-light-bot:    #D2D2D2;
  --c-light-text:   #06070A;
  --c-light-muted:  #55585F;
  --c-light-dim:    #8B8E95;
  --c-light-line:   #C4C4C6;

  /* ---- COLOR: semántico de mercado (UNIVERSAL, no se reemplaza) ----
     --c-up y --c-down son tokens SEMÁNTICOS (live / up / down), no de
     marca. El quant lee verde/rojo como lenguaje universal; romperlo
     para una paleta de marca sería malpractice de diseño. */
  --c-up:           #3DDC97;
  --c-up-soft:      #10291F;
  --c-down:         #FF5A5A;
  --c-down-soft:    #2E1414;

  /* ---- COLOR: acentos de marca ----
     --c-accent   = primario (verde, = --c-up). CTAs, focus, hover.
     --c-accent-2 = secundario (naranja, = xQuant #ff914d). Reservado
                    para cross-refs a xQuant: stack card 02, exclusive
                    tag xQuant, "Abrir xQuant" link-rule, footer
                    "Powered by xQuant", chart-line canvas, hero
                    hint lightning. Ver audit-ui.md §1. */
  --c-accent:       var(--c-up);
  --c-accent-2:     #FF914D;                            /* NEW */
  --c-accent-2-soft: rgba(255, 145, 77, 0.16);          /* NEW — chart line halo */

  /* ---- TIPOGRAFÍA ----
     Display + sans: Familjen Grotesk + Inter. El eje italic es
     signature device ("el mercado.", "No avatares."). Rajdhani
     perdería el italic y haría sonar el copy a crypto-bro.

     Mono: JetBrains Mono (era Martian Mono). Martian era humanist
     display mono mal cast como data mono; JBM es terminal-grade y
     es lo que usa xQuant, así que el link tipográfico es automático. */
  --font-display: 'Familjen Grotesk', 'Helvetica Neue', Arial, sans-serif;
  --font-sans:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:    'JetBrains Mono', 'SF Mono', Menlo, monospace;

  /* escala fluida */
  --fs-2xs:  clamp(0.6rem, 0.56rem + 0.14vw, 0.68rem);
  --fs-xs:   clamp(0.7rem, 0.66rem + 0.16vw, 0.78rem);
  --fs-sm:   clamp(0.82rem, 0.77rem + 0.22vw, 0.94rem);
  --fs-base: clamp(1rem, 0.95rem + 0.28vw, 1.12rem);
  --fs-lg:   clamp(1.2rem, 1.05rem + 0.6vw, 1.5rem);
  --fs-xl:   clamp(1.7rem, 1.35rem + 1.5vw, 2.5rem);
  --fs-2xl:  clamp(2.4rem, 1.7rem + 3vw, 4rem);
  --fs-3xl:  clamp(3.2rem, 2.2rem + 4.8vw, 6rem);
  --fs-hero: clamp(3rem, 1.2rem + 8vw, 8.5rem);          /* tightened 10% max */
  --fs-giant: clamp(4rem, 1.6rem + 12vw, 13rem);         /* tightened 10% max */

  /* El apretón óptico de Trionn: interlineado MENOR que el tamaño,
     tracking negativo fuerte, peso 400. Nunca bold. */
  --lh-hero:  0.92;
  --lh-tight: 1.0;
  --lh-snug:  1.18;
  --lh-base:  1.55;
  --lh-loose: 1.7;

  --ls-hero:  -0.055em;
  --ls-tight: -0.035em;
  --ls-base:  -0.011em;
  --ls-wide:   0.05em;
  --ls-xwide:  0.16em;

  /* ---- ESPACIO (grilla 8pt) ---- */
  --sp-1:  0.25rem;
  --sp-2:  0.5rem;
  --sp-3:  0.75rem;
  --sp-4:  1rem;
  --sp-5:  1.5rem;
  --sp-6:  2rem;
  --sp-7:  3rem;
  --sp-8:  4rem;
  --sp-9:  6rem;
  --sp-10: 8rem;
  --sp-11: 12rem;

  /* ---- LAYOUT ---- */
  --container-max: 1500px;
  --container-pad: clamp(1.25rem, 2vw + 0.5rem, 3.5rem);
  --section-gap:   clamp(4rem, 3vw + 2.5rem, 8rem);
  --nav-h:         84px;
  --sheet-r:       clamp(24px, 3.5vw, 52px);
  --sheet-gap:     clamp(6px, 0.8vw, 12px);

  /* ---- RADIOS ---- */
  --r-xs: 4px;
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 24px;
  --r-xl: 36px;
  --r-pill: 999px;

  /* ---- MOTION ---- */
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-expo:   cubic-bezier(0.16, 1, 0.3, 1);

  --d-instant: 100ms;
  --d-fast:    250ms;
  --d-base:    450ms;
  --d-slow:    800ms;
  --d-slower:  1200ms;

  /* ---- Z-INDEX ---- */
  --z-base:      1;
  --z-elev:     10;
  --z-nav:      50;
  --z-menu:     70;
  --z-overlay:  80;
  --z-cursor:  100;
  --z-preloader: 200;
}

@media (prefers-reduced-transparency: reduce) {
  .nav.is-scrolled {
    background: var(--c-bg);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .cursor__label { opacity: 1; }
  .menu__scrim { background: var(--c-bg); opacity: 0.95; }
}

/* Accesibilidad: matar todo el motion custom */
@media (prefers-reduced-motion: reduce) {
  :root {
    --d-instant: 0ms;
    --d-fast:    0ms;
    --d-base:    0ms;
    --d-slow:    0ms;
    --d-slower:  0ms;
  }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}