/* ═══════════════════════════════════════════════════════════════
   TRIBUTIX · DESIGN TOKENS v1
   Fuente de verdad de la identidad visual. La usan landing.html y
   privacidad.html. index.html y offline.html replican los valores
   inline (deben poder renderizar sin esta hoja): sincronizar a mano.
   ═══════════════════════════════════════════════════════════════ */
:root{
  color-scheme: dark;

  /* ── Superficies (tinta azul-pizarra, hue 212°) ── */
  --tx-bg:            #060A0E;   /* canónico: theme-color, manifest, splash */
  --tx-surface-1:     #0B1219;   /* secciones alternas, footer, sidebar */
  --tx-surface-2:     #121B24;   /* tarjetas, modales */
  --tx-surface-3:     #1A242F;   /* hover, inputs, chips */
  --tx-surface-inset: #04070A;   /* consola, bloques de código */

  /* ── Marca: jade ── */
  --tx-jade-300: #6FF2CE;
  --tx-jade-400: #3BE3B0;   /* texto e iconos de acento (12.1:1 sobre bg) */
  --tx-jade-500: #12C99A;   /* color de marca, rellenos, botón primario (9.3:1) */
  --tx-jade-600: #0A9E7C;   /* hover de botón, bordes fuertes */
  --tx-jade-700: #076E57;
  --tx-teal-600: #0E8FA8;   /* socio del degradado */
  --tx-teal-700: #0A6B7F;
  --tx-jade-rgb: 18,201,154;
  --tx-teal-rgb: 14,143,168;

  /* ── Acento de valor: oro (solo cifras de ahorro y badge premium) ── */
  --tx-gold-300: #FFD9A0;
  --tx-gold-400: #FFC978;
  --tx-gold-500: #E8A33D;

  /* ── Semánticos ── */
  --tx-success: #12C99A;
  --tx-warning: #F5A524;
  --tx-danger:  #FF4D57;
  --tx-info:    #3E7BFA;

  /* ── Texto ── */
  --tx-text-1:   #EAF2F7;   /* 18.4:1 */
  --tx-text-2:   #9DB0C0;   /*  8.8:1 — cuerpo secundario */
  --tx-text-3:   #64798A;   /*  4.6:1 — labels, mínimo AA */
  --tx-text-4:   #3A4C5C;   /* solo decorativo, nunca texto informativo */
  --tx-on-brand: #04241C;   /* texto sobre relleno jade (9.0:1) */

  /* ── Bordes y cristal ── */
  --tx-border-1:     rgba(234,242,247,.08);
  --tx-border-2:     rgba(234,242,247,.14);
  --tx-border-brand: rgba(18,201,154,.30);
  --tx-glass-1:      rgba(255,255,255,.03);
  --tx-glass-2:      rgba(255,255,255,.06);
  --tx-scrim:        rgba(6,10,14,.88);

  /* ── Degradados ── */
  --tx-grad-brand:      linear-gradient(135deg,#3BE3B0 0%,#12C99A 55%,#0E8FA8 100%);
  --tx-grad-brand-soft: linear-gradient(135deg,rgba(59,227,176,.18),rgba(14,143,168,.05));
  --tx-grad-gold:       linear-gradient(135deg,#FFD9A0,#E8A33D);
  --tx-grad-surface:    linear-gradient(180deg,var(--tx-bg),var(--tx-surface-1));

  /* ── Sombras ── */
  --tx-sh-1:     0 1px 2px rgba(0,0,0,.45);
  --tx-sh-2:     0 4px 14px rgba(0,0,0,.38);
  --tx-sh-3:     0 12px 34px rgba(0,0,0,.45);
  --tx-sh-4:     0 24px 64px rgba(0,0,0,.55);
  --tx-sh-modal: 0 32px 100px rgba(0,0,0,.72);
  --tx-glow-sm:  0 0 18px rgba(18,201,154,.22);
  --tx-glow-md:  0 0 38px rgba(18,201,154,.18);
  --tx-glow-lg:  0 18px 52px rgba(18,201,154,.24);
  --tx-glow-gold:0 0 26px rgba(232,163,61,.20);
  --tx-ring:     0 0 0 3px rgba(18,201,154,.22);

  /* ── Radios ── */
  --tx-r-xs:6px; --tx-r-sm:9px; --tx-r-md:12px; --tx-r-lg:16px;
  --tx-r-xl:22px; --tx-r-2xl:28px; --tx-r-pill:999px;

  /* ── Espaciado (base 4) ── */
  --tx-s-1:4px;  --tx-s-2:8px;  --tx-s-3:12px; --tx-s-4:16px;
  --tx-s-5:20px; --tx-s-6:24px; --tx-s-8:32px; --tx-s-10:40px;
  --tx-s-12:48px;--tx-s-16:64px;--tx-s-20:80px;--tx-s-24:96px;
  --tx-gutter:    clamp(20px,5vw,48px);
  --tx-section-y: clamp(64px,9vw,112px);
  --tx-maxw:       1200px;
  --tx-maxw-prose: 720px;

  /* ── Tipografía ── */
  --tx-ff:      'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --tx-ff-mono: ui-monospace,'SF Mono','Cascadia Code','JetBrains Mono',Consolas,monospace;
  --tx-fs-display: clamp(34px,6.2vw,64px);
  --tx-fs-h1:      clamp(28px,4.4vw,46px);
  --tx-fs-h2:      clamp(22px,2.8vw,30px);
  --tx-fs-h3:      19px;
  --tx-fs-lg:      18px;
  --tx-fs-md:      16px;
  --tx-fs-sm:      14px;
  --tx-fs-xs:      12.5px;
  --tx-fs-2xs:     11px;
  --tx-lh-tight:1.08; --tx-lh-snug:1.25; --tx-lh-body:1.7;
  --tx-ls-display:-.03em; --tx-ls-h:-.022em; --tx-ls-eyebrow:.14em;
  --tx-num: "tnum" 1, "lnum" 1;

  /* ── Movimiento ── */
  --tx-dur-1:120ms; --tx-dur-2:220ms; --tx-dur-3:400ms; --tx-dur-4:700ms;
  --tx-ease:     cubic-bezier(.4,0,.2,1);
  --tx-ease-out: cubic-bezier(.16,1,.3,1);
}

/* Foco visible global: el proyecto no tenía ninguno */
:focus-visible{ outline:2px solid var(--tx-jade-400); outline-offset:2px; }