/* ── variables.css ── Design tokens ── */
:root {
  /* Brand colors */
  --indigo:        #6366F1;
  --indigo-light:  #818CF8;
  --indigo-dim:    rgba(99,102,241,.15);
  --indigo-border: rgba(99,102,241,.3);

  --cyan:          #22D3EE;
  --cyan-dim:      rgba(34,211,238,.12);
  --cyan-border:   rgba(34,211,238,.3);

  --emerald:       #10B981;
  --emerald-dim:   rgba(16,185,129,.12);
  --emerald-border:rgba(16,185,129,.3);

  --sky:           #0EA5E9;
  --sky-dim:       rgba(14,165,233,.12);
  --sky-border:    rgba(14,165,233,.3);

  --violet:        #8B5CF6;
  --violet-dim:    rgba(139,92,246,.15);
  --violet-border: rgba(139,92,246,.3);

  --rose:          #F43F5E;
  --rose-dim:      rgba(244,63,94,.12);
  --amber:         #F59E0B;

  /* Neutral surfaces */
  --dark:      #07090F;
  --dark-2:    #0B1120;
  --dark-3:    #0F172A;
  --surface:   #111827;
  --surface-2: rgba(255,255,255,.03);
  --surface-3: rgba(255,255,255,.06);

  /* Borders */
  --border:      rgba(99,102,241,.18);
  --border-soft: rgba(255,255,255,.06);

  /* Text */
  --text:    #F1F5F9;
  --muted:   #94A3B8;
  --dim:     #475569;
  --dimmer:  #334155;

  /* Gradients */
  --grad-main:    linear-gradient(135deg, var(--indigo), var(--sky));
  --grad-text:    linear-gradient(90deg, var(--indigo-light) 0%, var(--cyan) 55%, var(--emerald) 100%);
  --grad-text-light: linear-gradient(90deg, var(--indigo) 0%, var(--cyan) 50%, var(--emerald) 100%);
  --grad-indigo:  linear-gradient(to top, var(--indigo), var(--indigo-light));
  --grad-cyan:    linear-gradient(to top, var(--cyan), #67E8F9);
  --grad-emerald: linear-gradient(to top, var(--emerald), #6EE7B7);
  --grad-sky:     linear-gradient(to top, var(--sky), #38BDF8);

  /* Typography */
  --font-display: 'Nunito', 'Inter', sans-serif;  /* Nunito Black 900 — exclusivo del wordmark */
  --font-body:    'Inter', sans-serif;            /* Inter — toda la UI y contenido */
  --font-ui:      'Inter', sans-serif;            /* Alias explícito para títulos de sección */

  /* Spacing */
  --section-pad: 96px 48px;
  --container:   1120px;

  /* Radii */
  --radius-sm:  6px;
  --radius-md:  10px;
  --radius-lg:  14px;
  --radius-xl:  20px;
  --radius-2xl: 28px;

  /* Transitions */
  --transition:      .2s ease;
  --transition-slow: .5s ease;
}