/* ==========================================================================
   SOS Data Recovery — Design tokens
   Fuente de verdad de color, tipografía, espaciado, radios, sombras, etc.
   No declarar valores "mágicos" en otros archivos: siempre referenciar
   estas variables para mantener consistencia entre las ~25 páginas del sitio.
   ========================================================================== */

:root {
  /* ---- Color: marca ---- */
  --color-violet: #7c3aed;
  --color-violet-light: #8b5cf6;
  --color-violet-dark: #6d28d9;
  --color-cyan: #06b6d4;
  /* Cian oscuro para TEXTO y bordes sobre fondo claro. El --color-cyan de
     marca solo alcanza 2.43:1 sobre blanco (WCAG AA pide 4.5:1), así que en
     texto se usa este, que da 5.36:1 y mantiene el tono de marca. */
  --color-cyan-dark: #0e7490;
  --color-indigo: #3730a3;
  --color-indigo-darker: #1e1b4b;
  --color-emerald: #10b981;

  /* ---- Color: superficies violeta (fondos, bordes suaves) ---- */
  --color-surface: #faf5ff;
  --color-surface-border: #e9d5ff;
  --color-surface-border-light: #f3e8ff;
  --color-surface-muted-text: #6b46c1;
  --color-surface-link: #c4b5fd;

  /* ---- Color: semántico ---- */
  --color-danger: #ef4444;
  --color-danger-dark: #dc2626;
  --color-whatsapp: #25d366;

  /* ---- Color: neutrales ---- */
  --color-white: #ffffff;
  --color-black: #000000;

  /* ---- Color: roles (lo que debe usarse en componentes) ---- */
  --color-text: var(--color-indigo);
  --color-text-muted: var(--color-surface-muted-text);
  --color-text-on-brand: var(--color-white);
  --color-bg: var(--color-white);
  --color-bg-alt: var(--color-surface);
  --color-border: var(--color-surface-border);
  --color-border-light: var(--color-surface-border-light);
  --color-link: var(--color-violet);
  --color-link-hover: var(--color-violet-dark);
  --color-focus-ring: var(--color-cyan);

  /* ---- Gradientes ---- */
  --gradient-brand: linear-gradient(135deg, var(--color-violet) 0%, var(--color-violet-light) 100%);
  --gradient-brand-hover: linear-gradient(135deg, var(--color-violet-dark) 0%, var(--color-violet) 100%);
  --gradient-accent: linear-gradient(135deg, var(--color-violet) 0%, var(--color-cyan) 100%);
  /* Versión oscurecida del gradiente de acento, OBLIGATORIA en cualquier
     superficie que lleve texto encima (banners, hero, ticker) y en el texto
     recortado con background-clip. El --gradient-accent normal solo sirve
     para elementos decorativos sin texto: su extremo cian deja el texto
     blanco en 2.43:1, muy por debajo del mínimo WCAG AA.
     Este va de 7.1:1 a 5.36:1 contra blanco. */
  --gradient-accent-deep: linear-gradient(135deg, var(--color-violet-dark) 0%, var(--color-cyan-dark) 100%);
  --gradient-footer: linear-gradient(135deg, var(--color-indigo-darker) 0%, var(--color-indigo) 100%);
  --gradient-danger: linear-gradient(135deg, var(--color-danger) 0%, var(--color-danger-dark) 100%);

  /* ---- Tipografía ---- */
  --font-family-base: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;

  --text-xs: 0.75rem;    /* 12px */
  --text-sm: 0.8125rem;  /* 13px */
  --text-base: 1rem;     /* 16px */
  --text-md: 1.1rem;     /* 17.6px */
  --text-lg: 1.3rem;     /* 20.8px */
  --text-xl: 1.5rem;     /* 24px */
  --text-2xl: 2rem;      /* 32px */
  --text-3xl: 2.5rem;    /* 40px */

  --font-normal: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;

  --leading-tight: 1.25;
  --leading-base: 1.6;

  /* ---- Espaciado (escala de 4px) ---- */
  --space-1: 0.25rem;   /* 4px */
  --space-2: 0.5rem;    /* 8px */
  --space-3: 0.75rem;   /* 12px */
  --space-4: 1rem;      /* 16px */
  --space-5: 1.25rem;   /* 20px */
  --space-6: 1.5rem;    /* 24px */
  --space-8: 2rem;      /* 32px */
  --space-10: 2.5rem;   /* 40px */
  --space-12: 3rem;     /* 48px */
  --space-16: 4rem;     /* 64px */
  --space-20: 5rem;     /* 80px */

  /* ---- Radios ---- */
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 15px;
  --radius-xl: 20px;
  --radius-full: 9999px;

  /* ---- Sombras (tintadas de violeta, coherentes con la marca) ---- */
  --shadow-sm: 0 2px 10px rgba(124, 58, 237, 0.1);
  --shadow-md: 0 10px 30px rgba(124, 58, 237, 0.1);
  --shadow-lg: 0 20px 40px rgba(124, 58, 237, 0.15);
  --shadow-button: 0 4px 15px rgba(124, 58, 237, 0.2);
  --shadow-black-sm: 0 4px 8px rgba(0, 0, 0, 0.3);

  /* ---- Transiciones ---- */
  --transition-fast: 0.2s ease;
  --transition-base: 0.3s ease;
  --transition-slow: 0.4s ease;

  /* ---- Layout ---- */
  --container-max: 1200px;
  --container-max-wide: 1400px;
  --header-height: 70px;

  /* Alto real del header fijo (row1 + ticker + nav de servicios), con margen
     de seguridad, para que ningún banner de página quede tapado debajo. */
  --header-offset: 260px;
  --header-offset-mobile: 280px;

  /* ---- Z-index ---- */
  --z-whatsapp: 1000;
  --z-header: 1000;
  --z-mobile-overlay: 1001;
  --z-mobile-menu: 1002;
}

/* ---- Modo oscuro: variables listas, sin activador en v1 ----
   Cuando se agregue el toggle, alternar [data-theme="dark"] en <html>. */
[data-theme="dark"] {
  --color-text: #ede9fe;
  --color-text-muted: #c4b5fd;
  --color-bg: #14102b;
  --color-bg-alt: #1e1b4b;
  --color-border: #3730a3;
  --color-border-light: #2e2a63;
  --color-link: var(--color-violet-light);
  --color-link-hover: #a78bfa;
}