/* ═══════════════════════════════════════════════════════════════
   tokens.css — El ADN visual de Swell Properties

   Esto NO es diseño. Son las decisiones de marca, escritas una sola
   vez, para que todo el sitio las obedezca.

   Analogía: si styles.css es la casa, tokens.css es el catálogo de
   materiales. Cambias aquí el naranja y cambia en TODO el sitio.
   ═══════════════════════════════════════════════════════════════ */

:root {

  /* ── Color de marca ───────────────────────────────────────── */
  --swell-navy:        #011C47;   /* azul marino oficial */
  --swell-orange:      #E0A458;   /* acento oficial */

  /* Variaciones derivadas del navy (para fondos, bordes, capas) */
  --navy-900:          #011C47;
  --navy-700:          #0A2F6E;
  --navy-500:          #1B4C9E;
  --navy-050:          #F2F5FA;

  /* Neutros */
  --white:             #FFFFFF;
  --gray-100:          #F4F5F7;
  --gray-300:          #D6DAE1;
  --gray-500:          #8A93A3;
  --gray-700:          #4A5262;

  /* Semánticos — se usan por su NOMBRE, no por su color */
  --bg-page:           var(--white);
  --bg-surface:        var(--gray-100);
  --bg-inverse:        var(--navy-900);
  --text-primary:      var(--navy-900);
  --text-secondary:    var(--gray-700);
  --text-on-inverse:   var(--white);
  --accent:            var(--swell-orange);
  --border-subtle:     var(--gray-300);


  /* ── Tipografía ───────────────────────────────────────────── */
  --font-display:  'Space Grotesk', 'Segoe UI', system-ui, sans-serif;  /* títulos */
  --font-body:     'Inter', 'Segoe UI', system-ui, sans-serif;          /* texto */
  --font-mono:     'IBM Plex Mono', 'Consolas', monospace;              /* datos, cifras */

  /* Escala tipográfica */
  --text-xs:    0.75rem;    /* 12px */
  --text-sm:    0.875rem;   /* 14px */
  --text-base:  1rem;       /* 16px */
  --text-lg:    1.125rem;   /* 18px */
  --text-xl:    1.5rem;     /* 24px */
  --text-2xl:   2rem;       /* 32px */
  --text-3xl:   3rem;       /* 48px */
  --text-4xl:   4rem;       /* 64px */

  --leading-tight:  1.15;
  --leading-normal: 1.6;


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


  /* ── Formas ───────────────────────────────────────────────── */
  --radius-sm:   6px;
  --radius-md:   12px;
  --radius-lg:   20px;    /* tarjetas del Bento Grid */
  --radius-full: 999px;   /* botones tipo píldora */

  --shadow-card:  0 1px 3px rgba(1, 28, 71, 0.06),
                  0 8px 24px rgba(1, 28, 71, 0.06);


  /* ── Layout ───────────────────────────────────────────────── */
  --container-max:  1200px;
  --gutter:         var(--space-6);
}


/* ── Modo oscuro (opcional, para más adelante) ──────────────── */
@media (prefers-color-scheme: dark) {
  :root {
    /* PENDIENTE: decidir si el sitio tendrá modo oscuro.
       Si sí, aquí se redefinen SOLO los tokens semánticos. */
  }
}