/* ============================================================
   DESIGN TOKENS — Alexis Pineda CV
   Todos los valores de diseño viven aquí. No hardcodear
   colores ni tamaños en otros archivos CSS.
   ============================================================ */

:root {

  /* ── Fondos ─────────────────────────────────────────────── */
  --bg-base:         #0B0F1A;
  --bg-surface:      #111827;
  --bg-elevated:     #1A2235;
  --bg-border:       #243048;

  /* ── Textos ──────────────────────────────────────────────── */
  --text-primary:    #F1F5F9;
  --text-secondary:  #8B9CB8;
  --text-muted:      #3D5068;

  /* ── Acento — Azul profesional ───────────────────────────── */
  --accent:          #3B82F6;
  --accent-glow:     rgba(59, 130, 246, 0.18);
  --accent-subtle:   rgba(59, 130, 246, 0.08);
  --accent-border:   rgba(59, 130, 246, 0.30);

  /* ── Acento secundario — Indigo ──────────────────────────── */
  --accent2:         #818CF8;
  --accent2-subtle:  rgba(129, 140, 248, 0.08);
  --accent2-border:  rgba(129, 140, 248, 0.25);

  /* ── Estados ─────────────────────────────────────────────── */
  --success:         #10B981;
  --success-subtle:  rgba(16, 185, 129, 0.10);
  --whatsapp:        #25D366;
  --whatsapp-hover:  #1fba58;

  /* ── Tipografía ──────────────────────────────────────────── */
  --font-heading:    'Lexend', sans-serif;
  --font-body:       'Inter', sans-serif;
  --font-mono:       'JetBrains Mono', monospace;

  /* ── Escala tipográfica ──────────────────────────────────── */
  --text-xs:         0.75rem;    /* 12px — labels de skills */
  --text-sm:         0.875rem;   /* 14px — metadata, fechas */
  --text-base:       1rem;       /* 16px — cuerpo */
  --text-lg:         1.125rem;   /* 18px — subtítulos */
  --text-xl:         1.25rem;    /* 20px */
  --text-2xl:        1.5rem;     /* 24px */
  --text-3xl:        1.875rem;   /* 30px */
  --text-4xl:        2.25rem;    /* 36px */
  --text-5xl:        3rem;       /* 48px — nombre hero */

  /* ── Espaciado (base 4px) ────────────────────────────────── */
  --space-1:         0.25rem;    /* 4px */
  --space-2:         0.5rem;     /* 8px */
  --space-3:         0.75rem;    /* 12px */
  --space-4:         1rem;       /* 16px */
  --space-6:         1.5rem;     /* 24px */
  --space-8:         2rem;       /* 32px */
  --space-12:        3rem;       /* 48px */
  --space-16:        4rem;       /* 64px */
  --space-24:        6rem;       /* 96px */

  /* ── Border radius ───────────────────────────────────────── */
  --radius-sm:       4px;
  --radius-md:       8px;
  --radius-lg:       12px;
  --radius-xl:       16px;
  --radius-full:     9999px;

  /* ── Layout ──────────────────────────────────────────────── */
  --max-width:       960px;
  --header-height:   70px;

  /* ── Transiciones ────────────────────────────────────────── */
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
  --transition-slow: 400ms ease;

  /* ── Sombras ─────────────────────────────────────────────── */
  --shadow-card:     0 4px 24px rgba(0, 0, 0, 0.4);
  --shadow-accent:   0 0 20px var(--accent-glow);
  --shadow-accent-strong: 0 0 30px rgba(59, 130, 246, 0.22);
}