/* ============================================================
   HITO HUB — DESIGN TOKENS · Fuente única de verdad
   Este archivo define el sistema. Todo lo demás (wireframes
   hoy, child theme de Hello Elementor mañana) bebe de aquí.
   ============================================================ */

/* Tipografía del sistema:
   Funnel Display → titulares (carácter, anti "look IA")
   Inter          → cuerpo y UI (legibilidad neutra)        */
@import url('https://fonts.googleapis.com/css2?family=Funnel+Display:wght@400;500;600;700;800&family=Inter:wght@400;500;600&display=swap');

:root {
  /* ── COLOR · paleta disciplinada: mono + 1 acento ── */
  --c-ink:        #11190C;   /* negro de marca — base */
  --c-ink-soft:   #1C2616;   /* superficie oscura alterna */
  --c-accent:     #E8FF57;   /* lima — SOLO señal: CTA / acento */
  --c-paper:      #F5F5F5;   /* fondo claro */
  --c-surface:    #FFFFFF;   /* tarjetas */
  --c-muted:      #777777;   /* texto secundario */
  --c-sand:       #CAC4B7;   /* arena — logos partners / detalle cálido sobre oscuro */
  --c-line:       rgba(17,25,12,0.12);  /* hairlines sobre claro */
  --c-line-dark:  rgba(255,255,255,0.15);/* hairlines sobre oscuro */

  /* ── TEXTURA · obsidiana con vetas lima (premium, anti-flat) ── */
  --texture-sphere: url('https://hitohub.co/wp-content/uploads/2026/07/HITO-hub.webp');

  /* Texto sobre fondo oscuro (escala de opacidad, no grises sueltos) */
  --c-on-dark-1:  #FFFFFF;
  --c-on-dark-2:  rgba(255,255,255,0.60);
  --c-on-dark-3:  rgba(255,255,255,0.40);

  /* ── TIPOGRAFÍA ── */
  --font-display: 'Funnel Display', ui-sans-serif, system-ui, sans-serif;
  --font-body:    'Inter', ui-sans-serif, system-ui, sans-serif;

  /* Escala tipográfica (1.25 · major third desde 16px) */
  --t-eyebrow:    0.75rem;   /* 12px — etiquetas */
  --t-body-sm:    0.875rem;  /* 14px */
  --t-body:       1rem;      /* 16px */
  --t-body-lg:    1.125rem;  /* 18px — subtítulos */
  --t-h3:         1.375rem;  /* 22px */
  --t-h2:         clamp(1.75rem, 4vw, 3rem);    /* 28→48px */
  --t-h1:         clamp(2.25rem, 5vw, 4rem);    /* 36→64px */

  /* Pesos */
  --w-regular:    400;
  --w-medium:     500;
  --w-semibold:   600;
  --w-bold:       700;

  /* Tracking — los titulares Funnel respiran mejor algo cerrados */
  --track-tight:  -0.04em;
  --track-snug:   -0.02em;
  --track-wide:   0.1em;     /* eyebrows en mayúsculas */

  /* ── ESPACIADO (escala 4px) ── */
  --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;

  /* ── RADIOS · sistema de "cajas" ── */
  --r-sm: 12px;  --r-md: 20px;  --r-lg: 32px;  --r-xl: 50px;
  --r-pill: 40px;

  /* ── LAYOUT ── */
  --max: 1200px;
  --gap: 24px;

  /* ── MOTION · una sola curva, una sola velocidad ── */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --dur:  0.15s;

  /* ── ELEVACIÓN · usar con moderación (anti-sombra-por-defecto) ── */
  --shadow-card: 0 4px 24px rgba(0,0,0,0.08);

  /* ── Aliases retro-compatibles con style.css existente ── */
  --dark:   var(--c-ink);
  --yellow: var(--c-accent);
  --bg:     var(--c-paper);
  --muted:  var(--c-muted);
  --border: var(--c-line);
  --radius-xl: var(--r-xl);
  --radius-lg: var(--r-lg);
  --radius-md: var(--r-md);
  --radius-sm: var(--r-sm);
}