/**
 * Design System — SGI FERMAR
 * Estilo: Vercel / Linear / Stripe
 * Clean, professional, minimal
 */

:root {
   /* =================================================================
       COLORES — Paleta Vercel-aligned
       ================================================================= */

   /* Primary - Dodger Blue */
   --color-primary-50: #f0f9ff;
   --color-primary-100: #e0f2fe;
   --color-primary-200: #b9e5fc;
   --color-primary-300: #7dd3fc;
   --color-primary-400: #38bdf8;
   --color-primary-500: #1DA1F2;
   --color-primary-600: #1A8CD8;
   --color-primary-700: #1578B8;
   --color-primary-800: #10649A;
   --color-primary-900: #0B4F7C;

   /* Primary shortcuts */
   --color-primary: #1DA1F2;
   --color-primary-light: rgba(29, 161, 242, 0.10);
   --color-primary-lighter: #b9e5fc;
   --color-primary-lightest: #f0f9ff;
   --color-primary-dark: #1DA1F2;
   --color-primary-darker: #1DA1F2;

   /* Grises Neutros (Vercel gray scale) */
   --color-gray-50: #fafafa;
   --color-gray-100: #f5f5f5;
   --color-gray-200: #e5e5e5;
   --color-gray-300: #d4d4d4;
   --color-gray-400: #a3a3a3;
   --color-gray-500: #737373;
   --color-gray-600: #525252;
   --color-gray-700: #404040;
   --color-gray-800: #262626;
   --color-gray-900: #171717;

   /* Semánticos */
   --color-success: #10b981;
   --color-success-light: #6ee7b7;
   --color-success-lightest: #ecfdf5;

   --color-warning: #f59e0b;
   --color-warning-light: #fcd34d;
   --color-warning-lightest: #fffbeb;

   --color-danger: #ef4444;
   --color-danger-light: #fca5a5;
   --color-danger-lightest: #fef2f2;

   --color-info: #1DA1F2;
   --color-info-light: #7dd3fc;
   --color-info-lightest: #f0f9ff;

   /* Fondos — Vercel: #fafafa, #fff, #f5f5f5 */
   --color-background: #fafafa;
   --color-background-sunken: #f5f5f5;
   --color-background-elevated: #ffffff;
   --color-white: #ffffff;

   /* Textos — alto contraste */
   --color-text-primary: #171717;
   --color-text-secondary: #525252;
   --color-text-tertiary: #a3a3a3;
   --color-text-disabled: #d4d4d4;
   --color-text-inverse: #ffffff;

   /* Bordes — neutros, sin tinte azul */
   --color-border: #e5e5e5;
   --color-border-light: #f5f5f5;
   --color-border-strong: #d4d4d4;

   /* Gradientes */
   --gradient-primary: linear-gradient(135deg, #1DA1F2 0%, #1578B8 100%);
   --gradient-primary-soft: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);

   /* =================================================================
       TIPOGRAFÍA
       ================================================================= */
   --font-family-base: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
   --font-family-mono: 'JetBrains Mono', 'Fira Code', monospace;

   --font-size-xs: 0.75rem;
   /* 12px */
   --font-size-sm: 0.8125rem;
   /* 13px — Vercel base para UI */
   --font-size-base: 0.875rem;
   /* 14px */
   --font-size-lg: 1rem;
   /* 16px */
   --font-size-xl: 1.125rem;
   /* 18px */
   --font-size-2xl: 1.5rem;
   /* 24px */
   --font-size-3xl: 1.875rem;
   /* 30px */

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

   --line-height-tight: 1.25;
   --line-height-normal: 1.5;
   --line-height-relaxed: 1.625;

   --letter-spacing-tight: -0.025em;
   --letter-spacing-normal: 0;
   --letter-spacing-wide: 0.025em;

   /* =================================================================
       ESPACIADO — Base 4px (Vercel-aligned)
       ================================================================= */
   --spacing-0: 0;
   --spacing-1: 0.25rem;
   /* 4px */
   --spacing-2: 0.5rem;
   /* 8px */
   --spacing-3: 0.75rem;
   /* 12px */
   --spacing-4: 1rem;
   /* 16px */
   --spacing-5: 1.25rem;
   /* 20px */
   --spacing-6: 1.5rem;
   /* 24px */
   --spacing-8: 2rem;
   /* 32px */
   --spacing-10: 2.5rem;
   /* 40px */
   --spacing-12: 3rem;
   /* 48px */
   --spacing-16: 4rem;
   /* 64px */

   /* Aliases semánticos */
   --spacing-xs: 0.25rem;
   --spacing-sm: 0.5rem;
   --spacing-md: 0.75rem;
   --spacing-lg: 1rem;
   --spacing-xl: 1.5rem;
   --spacing-2xl: 2rem;
   --spacing-3xl: 3rem;

   /* =================================================================
       BORDES Y SOMBRAS — Vercel-style
       ================================================================= */
   --radius-sm: 4px;
   --radius-md: 6px;
   --radius-lg: 8px;
   --radius-xl: 10px;
   --radius-2xl: 12px;
   --radius-full: 9999px;

   /* Sombras Vercel: sutiles, no agresivas */
   --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04);
   --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.04);
   --shadow-md: 0 4px 8px -2px rgba(0, 0, 0, 0.06);
   --shadow-lg: 0 8px 16px -4px rgba(0, 0, 0, 0.08);
   --shadow-xl: 0 16px 32px -8px rgba(0, 0, 0, 0.10);
   --shadow-2xl: 0 24px 48px -12px rgba(0, 0, 0, 0.12);

   /* Focus ring — Vercel style */
   --shadow-focus: 0 0 0 2px var(--color-background), 0 0 0 4px var(--color-primary);

   /* =================================================================
       TRANSICIONES
       ================================================================= */
   --transition-fast: 150ms;
   --transition-base: 200ms;
   --transition-slow: 300ms;
   --ease-default: cubic-bezier(0.4, 0, 0.2, 1);
   --ease-in: cubic-bezier(0.4, 0, 1, 1);
   --ease-out: cubic-bezier(0, 0, 0.2, 1);
   --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);

   /* =================================================================
       Z-INDEX
       ================================================================= */
   --z-dropdown: 100;
   --z-sticky: 200;
   --z-fixed: 300;
   --z-modal-backdrop: 400;
   --z-modal: 500;
   --z-tooltip: 600;
   --z-toast: 700;
}

--z-toast: 700;

/* =================================================================
       EFECTOS
       ================================================================= */
--backdrop-blur: blur(12px);
--backdrop-blur-lg: blur(20px);
}