/* =============================================================
   variables.css — Tokens de diseño de Braven Studio
   
   Aquí viven TODOS los colores, tipografías y espaciados.
   Para cambiar el look del sitio, solo edita este archivo.
   ============================================================= */

:root {
  /* ── Colores modo claro ─────────────────────────────────── */
  --color-bg:          #f0f1f0;   /* fondo principal */
  --color-bg-2:        #e8e9e7;   /* fondo secundario (hover) */
  --color-white:       #ffffff;   /* blanco puro */
  --color-navy:        #12182a;   /* azul marino principal */
  --color-navy-2:      #1d2840;   /* azul marino hover */
  --color-blue:        #4d78bb;   /* azul acento */
  --color-red:         #ea6969;   /* rojo/coral acento */
  --color-gray:        #5e5d5d;   /* texto secundario */
  --color-rule:        rgba(18,24,42,.11); /* líneas divisoras */

  /* Variantes con opacidad del navy */
  --color-navy-40:     rgba(18,24,42,.4);
  --color-navy-20:     rgba(18,24,42,.2);
  --color-navy-05:     rgba(18,24,42,.05);

  /* ── Tipografía ─────────────────────────────────────────── */
  --font-serif:   'Cormorant Garamond', Georgia, serif;  /* elegante, títulos */
  --font-sans:    'Plus Jakarta Sans', sans-serif;        /* moderno, UI */
  --font-body:    'Plus Jakarta Sans', sans-serif;        /* cuerpo de texto */

  /* ── Espaciado ──────────────────────────────────────────── */
  --space-xs:   8px;
  --space-sm:   16px;
  --space-md:   24px;
  --space-lg:   44px;
  --space-xl:   64px;
  --space-2xl:  120px;

  /* ── Bordes ─────────────────────────────────────────────── */
  --radius-sm:  6px;
  --radius-md:  10px;
  --radius-lg:  14px;
  --radius-xl:  20px;

  /* ── Transiciones ────────────────────────────────────────── */
  --transition-fast:   .15s ease;
  --transition-base:   .25s ease;
  --transition-spring: .75s cubic-bezier(.16,1,.3,1);
}

/* ── Modo oscuro — sobreescribe las variables de arriba ───── */
[data-theme="dark"] {
  --color-bg:          #0e1117;
  --color-bg-2:        #151b27;
  --color-white:       #1a2235;
  --color-navy:        #e8eaf0;
  --color-navy-2:      #d0d4e0;
  --color-gray:        #9a9ba3;
  --color-rule:        rgba(232,234,240,.11);
  --color-blue:        #6a96d4;
  --color-red:         #f08080;
  --color-navy-40:     rgba(232,234,240,.4);
  --color-navy-20:     rgba(232,234,240,.2);
  --color-navy-05:     rgba(232,234,240,.05);
}