/* ============================================================
   TOKENS.CSS — SimpleConvertly Design System v1.0
   Única fuente de verdad: variables, tema oscuro, keyframes,
   reset y scrollbar. Importar PRIMERO en todos los HTML.
   ============================================================ */

/* ── Fuentes ──────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;500;600;700;800&family=DM+Sans:wght@400;500;600&display=swap');

/* ── Variables — Tema claro (por defecto) ─────────────────── */
:root {
  /* Fondos */
  --bg:         #f5f3ef;
  --bg-2:       #edeae3;
  --surface:    #ffffff;
  --surface-2:  #f8f6f2;

  /* Texto */
  --text:       #1a1814;
  --text-2:     #4a4640;
  --muted:      #8c8680;

  /* Color de marca */
  --gold:       #b8892a;
  --gold-light: #d4a84d;
  --gold-soft:  rgba(184, 137, 42, 0.10);
  --gold-glow:  rgba(184, 137, 42, 0.20);

  /* Colores semánticos */
  --green:      #16a34a;
  --green-soft: rgba(22, 163, 74, 0.10);
  --red:        #dc2626;
  --red-soft:   rgba(220, 38, 38, 0.10);
  --blue:       #2563eb;
  --blue-soft:  rgba(37, 99, 235, 0.10);

  /* Bordes */
  --border:     rgba(0, 0, 0, 0.06);
  --border-md:  rgba(0, 0, 0, 0.11);

  /* Border radius */
  --r-sm:  10px;
  --r-md:  14px;
  --r-lg:  20px;
  --r-xl:  28px;

  /* Sombras */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 20px 48px rgba(0, 0, 0, 0.10);

  /* Animación */
  --ease:   cubic-bezier(0.22, 1, 0.36, 1);
  --t-fast: 150ms var(--ease);
  --t-base: 260ms var(--ease);

  /* Tipografía */
  --font-display: 'Sora', system-ui, sans-serif;
  --font-body:    'DM Sans', system-ui, sans-serif;
}

/* ── Tema oscuro ──────────────────────────────────────────── */
/* Nota: algunas páginas usan body.dark, otras [data-theme="dark"].
   Ambos selectores se incluyen para compatibilidad durante
   la migración. Una vez unificado, eliminar el que no uses. */
[data-theme="dark"],
body.dark {
  --bg:         #141210;
  --bg-2:       #1c1a17;
  --surface:    #201e1b;
  --surface-2:  #2a2723;

  --text:       #f0ece4;
  --text-2:     #c0bab0;
  --muted:      #7a7570;

  --gold:       #c9a24d;
  --gold-light: #e0bb6a;
  --gold-soft:  rgba(201, 162, 77, 0.12);
  --gold-glow:  rgba(201, 162, 77, 0.24);

  --border:     rgba(255, 255, 255, 0.06);
  --border-md:  rgba(255, 255, 255, 0.11);

  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.30);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.40);
  --shadow-lg: 0 20px 48px rgba(0, 0, 0, 0.50);
}

/* ── Reset ────────────────────────────────────────────────── */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: var(--font-body);
}

/* ── Scrollbar ────────────────────────────────────────────── */
::-webkit-scrollbar              { width: 8px; height: 8px; }
::-webkit-scrollbar-track        { background: transparent; }
::-webkit-scrollbar-thumb        {
  background: linear-gradient(180deg, #d4af51, #b8922a);
  border-radius: 8px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
*           { scrollbar-width: thin; scrollbar-color: #b8922a transparent; }
body.dark * { scrollbar-color: #c9a24d transparent; }

/* ── Keyframes ────────────────────────────────────────────── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes popIn {
  0%   { transform: scale(0.97); opacity: 0; }
  100% { transform: scale(1);    opacity: 1; }
}