/* ============================================================
   EVOLTIX — Design tokens
   Toca SOLO este archivo para cambiar la paleta entera.
   ============================================================ */

:root {
  /* ── Teal (primario) ─────────────────────────────────────── */
  --teal-50:  #F8FAFC;
  --teal-300: #38BDF8;
  --teal-500: #0EA5E9;
  --teal-700: #0369A1;

  /* ── Blue (secundario) ──────────────────────────────────── */
  --blue-50:  #F8FAFC;
  --blue-300: #94A3B8;
  --blue-500: #64748B;
  --blue-700: #475569;

  /* ── Neutrals ────────────────────────────────────────────── */
  --dark:         #020617;
  --dark-soft:    #0F172A;
  --neutral-100:  #F1F5F9;
  --neutral-200:  #CBD5E1;
  --neutral-500:  #64748B;
  --neutral-700:  #334155;

  /* ── RGB channels (para rgba() en CSS) ──────────────────── */
  --dark-rgb:         2, 6, 23;
  --teal-300-rgb:     56, 189, 248;
  --neutral-200-rgb:  203, 213, 225;
  --blue-300-rgb:     148, 163, 184;

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

  /* ── Layout ─────────────────────────────────────────────── */
  --container-max: 1200px;
  --section-py:    6rem;
  --section-px:    2rem;

  /* ── Espaciado de sección — irregular e intencionado ──── */
  --section-py-lg: 8rem;
  --section-py-sm: 4rem;

  /* ── Radios — mínimos, para no parecer genérico ──────── */
  --radius-btn:    2px;
  --radius-card:   4px;
  --radius-img:    2px 20px 20px 2px;  /* asimétrico */
  --radius-img-alt: 20px 2px 2px 20px; /* asimétrico invertido */

  /* ── Transiciones ────────────────────────────────────────── */
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-in-out:    cubic-bezier(0.77, 0, 0.175, 1);
  --transition:     0.28s var(--ease-out-quart);
}