/* Sushell · design tokens · extraídos de referencia/src/common.py, web.py, app.py, mobile.py
   Uso: <body class="t"> = oscuro (primario). <body class="t light"> = claro (alternativo).
   Regla: #5A52FF es el ÚNICO acento, siempre plano (sin degradados de color, sin rosa/magenta). */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap");

.t{
  /* superficies */
  --bg0:#08090A;  /* página / fondo de lámina */
  --bg:#0E0F10;   /* fondo de app y ventanas */
  --s1:#121212;   /* superficie 1: panel, nav pill, marco */
  --s2:#18191A;   /* superficie 2: tarjetas internas, inputs */
  --s3:#202122;   /* superficie 3: activo, hover, avatar */
  /* texto */
  --fg:#F4F4F2;   /* texto principal / botón primario */
  --fg2:#D4D6DA;  /* texto fuerte secundario */
  --sub:#8F9399;  /* texto secundario */
  --dim:#62666D;  /* metadatos, etiquetas mono */
  /* líneas (1px) */
  --l1:rgba(255,255,255,.06);
  --l2:rgba(255,255,255,.09);
  --l3:rgba(255,255,255,.14);
  /* acento único */
  --ac:#5A52FF;
  --acs:rgba(90,82,255,.14);   /* anillo de foco */
  --ac-border:rgba(90,82,255,.6);  /* borde de tarjeta destacada */
  --ac-code:#A8A3FF;            /* solo en bloques de código */
  --inv:#121212;  /* texto sobre botón primario (claro) */
  --grid:rgba(255,255,255,.035);
  --shadow:0 30px 80px rgba(0,0,0,.55);
  --shadow-dd:0 40px 90px rgba(0,0,0,.6);   /* dropdowns */
  --dd-bg:#0F1011;
  --cardbg:linear-gradient(180deg,rgba(255,255,255,.022),rgba(255,255,255,0));

  /* tipografía */
  --font-sans:Inter,system-ui,sans-serif;
  --font-mono:"Geist Mono",ui-monospace,monospace;
  /* radios */
  --r-ej:4px; --r-tag:6px; --r-btn-sm:7px; --r-btn:8px; --r-input:8px; --r-btn-lg:9px;
  --r-icon:10px; --r-card:12px; --r-dd:16px; --r-phone:46px; --r-pill:999px;
  /* layout */
  --page:1440px; --wrap:1240px; --nav-h:76px; --grid-size:72px;
  --app-topbar:56px; --app-sidebar:236px;
  --section-py:90px; --section-py-lg:110px;
  --mobile-w:390px; --mobile-px:20px;
}
.t.light{
  --bg0:#F4F4F2; --bg:#FAFAF8; --s1:#FFFFFF; --s2:#F1F1EE; --s3:#E8E8E4;
  --fg:#121212; --fg2:#2A2B2E; --sub:#5D6168; --dim:#8C9097;
  --l1:rgba(0,0,0,.06); --l2:rgba(0,0,0,.09); --l3:rgba(0,0,0,.15);
  --acs:rgba(90,82,255,.10); --inv:#F4F4F2; --grid:rgba(0,0,0,.045);
  --shadow:0 24px 60px rgba(0,0,0,.10); --cardbg:#FFFFFF;
}

/* escala tipográfica (desktop 1440) */
.t h1{font:600 76px/1.02 var(--font-sans);letter-spacing:-.045em}       /* hero inicio; heroes internos 64px */
.t h2{font:600 46px/1.06 var(--font-sans);letter-spacing:-.035em}       /* secciones 38–40px; CTA 52px */
.t h3{font:560 21px/1.25 var(--font-sans);letter-spacing:-.02em}
.t h4{font:560 15px/1.3 var(--font-sans);letter-spacing:-.01em}
.t p{font:400 16px/1.6 var(--font-sans);color:var(--sub)}
.eyebrow{font:500 11px/1 var(--font-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--sub);display:flex;align-items:center;gap:10px}
.eyebrow .sq{width:6px;height:6px;background:var(--ac);border-radius:1px}
.g2{color:var(--sub)} /* segunda línea gris de los titulares */
/* móvil 390: h1 40px/1.04 -.04em · h2 30px -.03em · p 14.5px */