/* ============================================================
   VARIABLES CSS — RM Solutions Mx
   Sistema de tokens de diseño para toda la plataforma.
   Paleta minimalista: blanco, gris técnico, negro.
   ============================================================ */

:root {
  /* ---- Colores de fondo ---- */
  --color-bg: #FFFFFF;              /* Fondo principal — claridad tecnológica */
  --color-bg-alt: #F5F5F5;         /* Fondo alterno para secciones con profundidad */
  --color-bg-admin: #FAFAFA;       /* Fondo del panel de administración */
  --color-bg-overlay: rgba(0, 0, 0, 0.45); /* Overlay para modales */

  /* ---- Colores de texto ---- */
  --color-text: #000000;           /* Tipografía principal — contraste fuerte */
  --color-text-secondary: #8E8E8E; /* Textos secundarios, subtítulos, meta */
  --color-text-light: #B0B0B0;     /* Texto terciario, placeholders */
  --color-text-inverse: #FFFFFF;   /* Texto sobre fondos oscuros */

  /* ---- Colores de acento ---- */
  --color-accent: #1A1A1A;         /* Botones primarios, CTAs */
  --color-accent-hover: #333333;   /* Estado hover de acentos */
  --color-accent-light: #F0F0F0;   /* Fondo de acento suave */

  /* ---- Bordes y líneas ---- */
  --color-border: #E0E0E0;         /* Bordes principales delgados */
  --color-border-light: #F0F0F0;   /* Bordes sutiles */
  --color-border-dark: #C0C0C0;    /* Bordes con más contraste */

  /* ---- Sombras ---- */
  --shadow-soft: 0 2px 8px rgba(0, 0, 0, 0.04);     /* Sombra sutil de reposo */
  --shadow-medium: 0 4px 16px rgba(0, 0, 0, 0.06);   /* Sombra de elevación media */
  --shadow-hover: 0 8px 30px rgba(0, 0, 0, 0.08);    /* Sombra al hacer hover */
  --shadow-modal: 0 20px 60px rgba(0, 0, 0, 0.12);   /* Sombra para modales */

  /* ---- Tipografía ---- */
  --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* Tamaños de fuente */
  --font-size-xs: 0.75rem;    /* 12px */
  --font-size-sm: 0.875rem;   /* 14px */
  --font-size-base: 1rem;     /* 16px */
  --font-size-md: 1.125rem;   /* 18px */
  --font-size-lg: 1.25rem;    /* 20px */
  --font-size-xl: 1.5rem;     /* 24px */
  --font-size-2xl: 2rem;      /* 32px */
  --font-size-3xl: 2.5rem;    /* 40px */
  --font-size-4xl: 3rem;      /* 48px */
  --font-size-hero: 4rem;     /* 64px — Título hero */

  /* Altura de línea */
  --line-height-tight: 1.1;
  --line-height-snug: 1.3;
  --line-height-normal: 1.6;
  --line-height-relaxed: 1.8;

  /* Tracking (letter-spacing) */
  --tracking-tight: -0.03em;   /* Para títulos grandes */
  --tracking-normal: 0;
  --tracking-wide: 0.05em;     /* Para etiquetas y subtítulos */
  --tracking-wider: 0.1em;     /* Para labels pequeños */

  /* ---- Espaciado ---- */
  --space-xs: 0.25rem;   /* 4px */
  --space-sm: 0.5rem;    /* 8px */
  --space-md: 1rem;      /* 16px */
  --space-lg: 1.5rem;    /* 24px */
  --space-xl: 2rem;      /* 32px */
  --space-2xl: 3rem;     /* 48px */
  --space-3xl: 4rem;     /* 64px */
  --space-4xl: 6rem;     /* 96px */
  --space-5xl: 8rem;     /* 128px */

  /* ---- Geometría y bordes ---- */
  --border-width: 1px;             /* Grosor de borde — coherencia con el cubo del logo */
  --border-radius-sm: 4px;        /* Radio mínimo — estética geométrica */
  --border-radius-md: 8px;        /* Radio para tarjetas */
  --border-radius-lg: 12px;       /* Radio para modales */
  --border-radius-full: 9999px;   /* Píldora / circular */

  /* ---- Transiciones ---- */
  --transition-fast: 0.2s ease;          /* Botones, íconos */
  --transition-base: 0.3s ease;         /* Tarjetas, hover general */
  --transition-smooth: 0.4s ease;       /* Navegación, paneles */
  --transition-slow: 0.6s ease-out;     /* Animaciones de entrada */
  --transition-logo: 2.5s ease;         /* Animación del logotipo SVG */

  /* ---- Layout ---- */
  --container-max: 1200px;        /* Ancho máximo de contenedor */
  --container-narrow: 900px;      /* Contenedor estrecho para textos */
  --header-height: 72px;         /* Altura del header/nav */
  --sidebar-width: 260px;        /* Ancho sidebar admin */

  /* ---- Z-Index ---- */
  --z-base: 1;
  --z-header: 100;
  --z-sidebar: 150;
  --z-modal: 200;
  --z-overlay: 190;
  --z-toast: 300;
}