/* ============================================================
   iBisne · Design System v2.0 "VAULT"
   tokens.css — único punto de verdad. NO hardcodear nada.
   ============================================================ */

:root {
  /* ─── COLOR ───────────────────────────────────────────────── */
  --bg-deep: #0A0E13;         /* abismo — solo hero y CTA final */
  --bg: #0D1117;              /* base — la mayoría */
  --bg-paper: #14191F;        /* elevado — secciones de data / testimonios */
  --bg-line: #1E242B;         /* hairlines 1px */

  --text-primary: #F2F2F2;    /* nunca #FFF puro */
  --text-secondary: #8B9099;
  --text-muted: #4A5058;

  --accent: #3DFF7F;          /* verde phosphor sólido — CTAs decisivos, microinteracciones reservadas */
  --accent-mint: #AEFFC8;     /* verde mint pastel — acento informacional, eyebrows, hover de links, arrows */
  --accent-glow: rgba(61, 255, 127, 0.35);
  --accent-soft: rgba(61, 255, 127, 0.08);

  /* ─── TYPOGRAPHY ──────────────────────────────────────────── */
  --font-display: 'Inter Tight', 'Söhne', 'Neue Haas Grotesk Display', system-ui, sans-serif;
  --font-body:    'Inter Tight', 'Söhne', 'Inter', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', 'Söhne Mono', ui-monospace, monospace;

  /* Display sizes — neo-grotesk masivos */
  --fs-hero:       clamp(72px, 14vw, 220px);
  --fs-display:    clamp(48px,  8vw, 120px);
  --fs-h2:         clamp(40px,  5vw,  72px);
  --fs-h3:         32px;
  --fs-card-title: 22px;     /* títulos internos de cards (.nav-mega-card .nmc-name) */
  --fs-input:      18px;     /* inputs editoriales (.field input/select) */
  --fs-body:       17px;
  --fs-base:       14px;     /* texto secundario interno (cards, body cortos) */
  --fs-small:      13px;
  --fs-micro:      11px;
  --fs-nano:       10px;     /* eyebrows internos overlay, labels técnicos */
  --fs-pico:        9px;     /* micro-labels: toggle, h-progress-num, section-num mobile */

  --lh-display: 0.92;
  --lh-tight:   1.05;
  --lh-body:    1.6;

  --ls-display: -0.04em;
  --ls-h2:      -0.025em;
  --ls-body:    -0.005em;
  --ls-mono:    0.04em;        /* labels mono — uppercase */

  --fw-regular:  400;
  --fw-medium:   500;

  /* ─── SPACING — escala 8px estricta ───────────────────────── */
  --sp-1:   4px;
  --sp-2:   8px;
  --sp-3:  16px;
  --sp-4:  24px;
  --sp-5:  32px;
  --sp-6:  48px;
  --sp-7:  64px;
  --sp-8:  80px;
  --sp-9: 120px;
  --sp-10: 160px;             /* padding seccional desktop */
  --sp-11: 200px;

  --section-pad-y: var(--sp-10);
  --section-pad-y-mobile: var(--sp-8);
  --hero-offset:   144px;     /* nav 72 × 2 — padding-top del hero sobre nav fijo */

  /* ─── FIELD shape — texto largo controlado ────────────────── */
  --field-textarea-min-h: 96px;
  --field-textarea-max-h: 320px;

  /* ─── SURFACES — scrim sobre imágenes ─────────────────────── */
  --bg-scrim:    rgba(13, 17, 23, 0.6);   /* mismo color de --bg con alpha; usado en .case-tile .ct-tag */
  --bg-nav-blur: rgba(13, 17, 23, 0.7);   /* nav.is-scrolled — translúcido sobre contenido */

  /* ─── GRID ────────────────────────────────────────────────── */
  --grid-cols: 12;
  --grid-gutter: 24px;
  --grid-max: 1440px;
  --grid-edge: var(--sp-6);   /* 48px márgenes desktop */
  --grid-edge-mobile: var(--sp-4);

  /* ─── MOTION ──────────────────────────────────────────────── */
  --ease-out-expo:     cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out-quart: cubic-bezier(0.76, 0, 0.24, 1);
  --ease-out-quart:    cubic-bezier(0.25, 1, 0.5, 1);

  --dur-cinematic: 1200ms;
  --dur-reg:        600ms;
  --dur-fast:       240ms;
  --dur-instant:    120ms;

  /* ─── HAIRLINES & RADII ───────────────────────────────────── */
  --hairline: 1px solid var(--bg-line);
  /* Sin radius en VAULT salvo el cursor blob (border-radius 50% interno) */

  /* ─── Z-INDEX ─────────────────────────────────────────────── */
  --z-base:       1;
  --z-raised:     5;          /* elevación moderada: .h-progress, .nav-mega panel */
  --z-nav:       50;
  --z-cursor:    90;          /* siempre arriba */
  --z-overlay:  100;          /* nav-overlay móvil */
  --z-nav-locked: 101;        /* nav sobre overlay cuando body.menu-locked */
  --z-page-transition: 105;   /* sobre nav-overlay para que cubra al navegar */
  --z-modal:    110;          /* reservado — modales/dialog puntuales */
}

/* ─── Tipografía base ─────────────────────────────────────── */
html {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--text-primary);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: 'ss01', 'cv11';   /* alternates limpios en Inter Tight */
}

/* ─── KEYFRAMES AMBIENTE — susurro, no grito ──────────────── */
@keyframes drift {
  0%   { transform: translateY(0); }
  100% { transform: translateY(1px); }
}
@keyframes breathe {
  0%, 100% { letter-spacing: -0.04em;  opacity: 1;    }
  50%      { letter-spacing: -0.038em; opacity: 0.94; }
}
@keyframes blink {
  0%, 49%   { opacity: 1; }
  50%, 100% { opacity: 0; }
}