/* tokens.css */

:root {

   /* ─────────────────────────────────────────────────────
       TOKENS SEMÁNTICOS
       ───────────────────────────────────────────────────── */
   --hybinet-color-text-primary: var(--contrast, #1F2A22);
   --hybinet-color-text-secondary: var(--contrast-2, #4B564E);
   --hybinet-color-text-meta: var(--contrast-3, #828D85);
   --hybinet-color-text-soft: var(--texto-secundario, #6B7066);
   --hybinet-color-bg-primary: var(--base, #FAFAF8);
   --hybinet-color-bg-secondary: var(--base-2, #F4F4F0);
   --hybinet-color-bg-tertiary: var(--base-3, #E5E5E0);
   --hybinet-color-brand-accent: var(--accent, #8DC219);
   --hybinet-color-status-danger: var(--danger, #D64545);
   --hybinet-color-status-success: var(--success, #0E7C66);
   --hybinet-color-status-warning: var(--warning, #E2A33B);
   --hybinet-color-link-default: var(--links, #5D830C);
   --hybinet-color-link-hover: var(--links-hover, #435E08);
   --hybinet-color-border-soft: var(--borde-suave, #D8D8D2);
   --hybinet-color-state-disabled: var(--desactivado, #A8A8A3);
   --hybinet-color-brand-accent-web: var(--accent-web, #AAE331);

   /* ─────────────────────────────────────────────────────
       PALETA GLOBAL
       ───────────────────────────────────────────────────── */
   --hybinet-palette-white: #ffffff;
   --hybinet-palette-black: #111111;
   --hybinet-palette-gray-dark: #333333;
   --hybinet-palette-red-badge: #E4133B;
   --hybinet-palette-red-text: #B7202E;
   --hybinet-palette-gray: #999999;
   --hybinet-palette-yellow: #ffb300;

   /* ─────────────────────────────────────────────────────
       TOKENS SEMÁNTICOS — BORDES
       ───────────────────────────────────────────────────── */
   --hybinet-color-border-medium: #e5e7eb;
   /* ─────────────────────────────────────────────────────
       SISTEMA DE ANIMACIONES Y EFECTOS
       ───────────────────────────────────────────────────── */
   --hybinet-transition-fast: 0.2s ease;
   --hybinet-transition-normal: 0.3s ease-in-out;
   --hybinet-transition-slow: 0.5s ease;

   --hybinet-shadow-sm: 0 4px 20px rgba(0, 0, 0, 0.03);
   --hybinet-shadow-md: 0 8px 30px rgba(0, 0, 0, 0.05);
   --hybinet-shadow-lg: 0 20px 40px rgba(0, 0, 0, 0.08);

   /* ─────────────────────────────────────────────────────
       SISTEMA DE BORDES Y RADIOS
       ───────────────────────────────────────────────────── */
   --hybinet-radius-sm: 4px;
   --hybinet-radius-md: 8px;
   --hybinet-radius-lg: 12px;
   --hybinet-radius-xl: 24px;
   --hybinet-radius-round: 50%;
   --hybinet-radius-input: 8px;
   /* Restaura bordes redondeados en inputs */

   /* ─────────────────────────────────────────────────────
       TOKENS ESTRUCTURALES (LAYOUT)
       ───────────────────────────────────────────────────── */
   --hybinet-spacing-x: 1.25rem; /* Padding lateral fijo (Parachoques) */
   --hybinet-spacing-y: 40px; /* Padding vertical Desktop */
   --hybinet-spacing-y-sm: 24px; /* Padding vertical Tablet */
   --hybinet-spacing-y-xs: 16px; /* Padding vertical Móvil */
   --hybinet-max-width: 1440px;
   /* Ancho máximo del contenedor */
}