/* TuPortalDelAlma — Design tokens v2
   Paleta e identidad alineadas a Digital Rider SPA (cálida, editorial). */
:root {
  /* ── Fondos (cálidos, tierra) ─────────────────────────────── */
  --bg-base: #181715;
  --bg-alt: #201f1c;
  --bg-elevated: #262522;
  --bg-elevated-hover: #2d2b28;
  --bg-overlay: rgba(24, 23, 21, 0.92);

  /* ── Marca Digital Rider ──────────────────────────────────── */
  --dr-gold: #edb781;        /* arena / dorado — acentos, eyebrows */
  --dr-gold-soft: rgba(237, 183, 129, 0.12);
  --dr-terracotta: #cd734f;  /* acción principal */
  --dr-terracotta-dark: #b45f3d;
  --dr-sage: #b4c995;        /* verde salvia — secundario */
  --dr-teal: #add4d9;        /* teal suave — secundario */

  /* ── Acento principal (mapea a la marca) ──────────────────── */
  --primary: #cd734f;
  --primary-hover: #b45f3d;
  --primary-muted: #edb781;

  /* ── Texto (blanco cálido) ────────────────────────────────── */
  --text-primary: #f2efe9;
  --text-secondary: #bdb8ae;
  --text-muted: #928d84;

  /* ── Bordes ───────────────────────────────────────────────── */
  --border-subtle: rgba(232, 230, 225, 0.09);
  --border-strong: rgba(232, 230, 225, 0.16);
  --border-focus: rgba(205, 115, 79, 0.55);

  /* ── Estados (afinados a la paleta cálida) ────────────────── */
  --success: #a7c17e;
  --warning: #edb781;
  --danger: #d9705a;
  --info: #add4d9;

  /* ── Tipografía ───────────────────────────────────────────── */
  --font-display: 'Plus Jakarta Sans', 'Segoe UI', system-ui, sans-serif;
  --font-ui: 'Inter', 'Segoe UI', system-ui, sans-serif;

  /* ── Espaciado ────────────────────────────────────────────── */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 40px;

  /* ── Radios (más sobrios / editoriales) ───────────────────── */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-pill: 999px;

  --shadow-card: 0 10px 34px rgba(0, 0, 0, 0.30);
  --nav-height: 72px;
}

/* Fondo de páginas de conversión: cálido, sin animación galáctica */
body.page-conversion .global-background {
  animation: none !important;
  background: var(--bg-base) !important;
  background-image:
    radial-gradient(ellipse 70% 45% at 50% -10%, rgba(237, 183, 129, 0.08), transparent 70%),
    radial-gradient(ellipse 55% 40% at 100% 100%, rgba(173, 212, 217, 0.05), transparent 65%) !important;
}