/* ==========================================================================
   variables.css — Tokens de diseño (custom properties)
   Identidad Gixt — tema OSCURO. Paleta oficial entregada por la marca.
   ========================================================================== */

:root {
  /* ---- Colores de marca (paleta oficial) ---- */
  --color-indigo: #5233fe;         /* índigo eléctrico: primario interactivo */
  --color-purple: #7a26a8;         /* morado: acentos, onda, degradados */
  --color-cream: #fffcef;          /* crema: texto y superficies claras */
  --color-black: #000000;          /* negro: fondo base */

  /* Roles semánticos (usar estos en los componentes, no los crudos de arriba) */
  --color-primary: var(--color-indigo);
  --color-primary-dark: #3d24c4;
  --color-primary-soft: rgba(82, 51, 254, 0.16);  /* fondos suaves, badges */
  --color-accent: var(--color-purple);

  /* Degradado de marca (logo, mockups, onda, detalles) */
  --gradient-brand: linear-gradient(135deg, #5233fe 0%, #7a26a8 100%);

  /* ---- Fondos y superficies (oscuras) ---- */
  --color-bg: #060309;             /* negro con leve tinte morado */
  --color-surface: #0e0816;        /* tarjetas / secciones alternas */
  --color-surface-2: #160d24;      /* superficie elevada */

  /* ---- Texto sobre fondo oscuro ---- */
  --color-text: var(--color-cream);
  --color-text-muted: rgba(255, 252, 239, 0.66);
  --color-border: rgba(255, 252, 239, 0.12);

  /* ---- Estado ---- */
  --color-success: #3ddc97;

  /* ---- Tipografía ---- */
  --font-base: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-heading: "Poppins", var(--font-base);

  /* Escala tipográfica fluida */
  --fs-sm: 0.875rem;
  --fs-base: 1rem;
  --fs-lg: 1.125rem;
  --fs-xl: clamp(1.5rem, 4vw, 2.25rem);
  --fs-2xl: clamp(2.25rem, 6vw, 3.75rem);
  --fs-hero: clamp(2.75rem, 9vw, 6rem);   /* titular del hero */

  /* ---- Espaciado ---- */
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 2rem;
  --space-lg: 4rem;
  --space-xl: 6rem;

  /* ---- Layout ---- */
  --container-max: 1200px;
  --container-pad: 1.25rem;
  --header-h: 76px;

  /* ---- Otros ---- */
  --radius: 0.75rem;
  --radius-lg: 1.25rem;
  --radius-pill: 999px;
  --shadow: 0 4px 16px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 24px 60px rgba(82, 51, 254, 0.35);
  --transition: 200ms ease;

  /* ---- Breakpoints (referencia para media queries) ----
     móvil:   < 768px
     tablet:  >= 768px
     desktop: >= 980px
  */
}