/**
 * ConectaTerapia - Design System Unificado (TOKENS ONLY)
 * @description Sistema de TOKENS CSS basado en paleta de colores existente
 * @version 3.1.0 - Solo tokens, sin clases de componentes
 *
 * IMPORTANTE: Este archivo contiene SOLAMENTE variables CSS (tokens).
 * Las clases de componentes (.ct-btn, .ct-input, etc.) están en sus
 * archivos específicos de cada panel para evitar conflictos.
 *
 * Paleta actual detectada:
 * - Primary: #50A4A7 (Teal principal - 112 usos)
 * - Dark: #177275, #2D7A7D, #0f3e43 (Teal oscuro)
 * - Light: #A2D5D6, #E2E8F0 (Teal/gris claro)
 * - Success: #059669, #10B981 (Verde)
 * - Error: #ef4444, #dc2626 (Rojo)
 * - Warning: #f59e0b (Amarillo)
 */

/* =====================================================
   DESIGN TOKENS - Colores Existentes
   ===================================================== */

:root {
    /* === PRIMARIOS (Teal - Color principal del sitio) === */
    --ct-primary-50: #F0FAFA;   /* Fondo muy claro */
    --ct-primary-100: #E2E8F0;  /* Gris claro (108 usos) */
    --ct-primary-200: #A2D5D6;  /* Teal claro (15 usos) */
    --ct-primary-300: #8ACCCF;  /* Teal medio-claro */
    --ct-primary-400: #6FB8BB;  /* Teal medio */
    --ct-primary-500: #50A4A7;  /* Teal PRINCIPAL (112 usos) */
    --ct-primary-600: #3B8A8D;  /* Teal medio-oscuro */
    --ct-primary-700: #2D7A7D;  /* Teal oscuro (26 usos) */
    --ct-primary-800: #177275;  /* Teal muy oscuro (82 usos) */
    --ct-primary-900: #0f3e43;  /* Teal casi negro (23 usos) */

    /* === SECUNDARIOS (Verdes - Acentos) === */
    --ct-success-50: #ECFDF5;
    --ct-success-100: #D1FAE5;
    --ct-success-200: #A7F3D0;
    --ct-success-300: #6EE7B7;
    --ct-success-400: #34D399;
    --ct-success-500: #10B981;  /* Verde éxito (22 usos) */
    --ct-success-600: #059669;  /* Verde éxito (23 usos) */
    --ct-success-700: #047857;
    --ct-success-800: #065F46;
    --ct-success-900: #064E3B;

    /* === NEUTROS (Grises) === */
    --ct-slate-50: #F8FAFC;    /* Off-white (43 usos) */
    --ct-slate-100: #F1F5F9;   /* Gris muy claro (56 usos) */
    --ct-slate-200: #E2E8F0;   /* Gris claro (108 usos) */
    --ct-slate-300: #CBD5E1;   /* Gris medio-claro (16 usos) */
    --ct-slate-400: #94A3B8;   /* Gris medio (23 usos) */
    --ct-slate-500: #64748B;   /* Gris medio (63 usos) */
    --ct-slate-600: #475569;   /* Gris medio-oscuro (41 usos) */
    --ct-slate-700: #334155;   /* Gris oscuro (17 usos) */
    --ct-slate-800: #1E293B;   /* Gris muy oscuro (44 usos) */
    --ct-slate-900: #0F172A;   /* Gris casi negro (26 usos) */

    /* === ALERTAS === */
    --ct-warning-50: #FFFBEB;
    --ct-warning-100: #FEF3C7;
    --ct-warning-200: #FDE68A;
    --ct-warning-300: #FCD34D;
    --ct-warning-400: #FBBF24;
    --ct-warning-500: #F59E0B;  /* Amarillo advertencia (13 usos) */
    --ct-warning-600: #D97706;
    --ct-warning-700: #B45309;
    --ct-warning-800: #92400E;
    --ct-warning-900: #78350F;

    --ct-danger-50: #FEF2F2;
    --ct-danger-100: #FEE2E2;  /* Rojo claro (13 usos) */
    --ct-danger-200: #FECACA;
    --ct-danger-300: #FCA5A5;
    --ct-danger-400: #F87171;
    --ct-danger-500: #EF4444;  /* Rojo error (21 usos) */
    --ct-danger-600: #DC2626;  /* Rojo oscuro (20 usos) */
    --ct-danger-700: #B91C1C;
    --ct-danger-800: #991B1B;
    --ct-danger-900: #7F1D1D;

    /* === ESPECIALES === */
    --ct-white: #FFFFFF;         /* Blanco (112 usos) */
    --ct-black: #000000;
    --ct-transparent: transparent;
}

/* =====================================================
   TIPOGRAFÍA - Fuentes Existentes + Mejoras
   ===================================================== */

:root {
    /* Font Families (ya actualizadas a Figtree + Noto Sans) */
    --ct-font-heading: 'Figtree', 'Poppins', -apple-system, sans-serif;
    --ct-font-body: 'Noto Sans', 'Poppins', -apple-system, sans-serif;
    --ct-font-mono: 'SF Mono', 'Roboto Mono', monospace;

    /* Font Sizes (Escala modular existente) */
    --ct-text-xs: 0.75rem;      /* 12px */
    --ct-text-sm: 0.875rem;     /* 14px */
    --ct-text-base: 1rem;       /* 16px */
    --ct-text-lg: 1.125rem;     /* 18px */
    --ct-text-xl: 1.25rem;      /* 20px */
    --ct-text-2xl: 1.5rem;      /* 24px */
    --ct-text-3xl: 1.875rem;    /* 30px */
    --ct-text-4xl: 2.25rem;     /* 36px */
    --ct-text-5xl: 3rem;        /* 48px */

    /* Font Weights */
    --ct-font-light: 300;
    --ct-font-normal: 400;
    --ct-font-medium: 500;
    --ct-font-semibold: 600;
    --ct-font-bold: 700;
    --ct-font-extrabold: 800;

    /* Line Heights */
    --ct-leading-none: 1;
    --ct-leading-tight: 1.25;
    --ct-leading-snug: 1.375;
    --ct-leading-normal: 1.5;
    --ct-leading-relaxed: 1.625;
    --ct-leading-loose: 2;
}

/* =====================================================
   ESPACIADO - Sistema de 8px (Grid existente)
   ===================================================== */

:root {
    --ct-space-0: 0;
    --ct-space-1: 0.25rem;   /* 4px */
    --ct-space-2: 0.5rem;    /* 8px */
    --ct-space-3: 0.75rem;   /* 12px */
    --ct-space-4: 1rem;      /* 16px */
    --ct-space-5: 1.25rem;   /* 20px */
    --ct-space-6: 1.5rem;    /* 24px */
    --ct-space-8: 2rem;      /* 32px */
    --ct-space-10: 2.5rem;   /* 40px */
    --ct-space-12: 3rem;     /* 48px */
    --ct-space-16: 4rem;     /* 64px */
    --ct-space-20: 5rem;     /* 80px */
    --ct-space-24: 6rem;     /* 96px */
}

/* =====================================================
   BORDES - Radios existentes
   ===================================================== */

:root {
    --ct-radius-none: 0;
    --ct-radius-sm: 0.25rem;    /* 4px */
    --ct-radius-md: 0.5rem;     /* 8px */
    --ct-radius-lg: 0.75rem;    /* 12px */
    --ct-radius-xl: 1rem;       /* 16px */
    --ct-radius-2xl: 1.5rem;    /* 24px */
    --ct-radius-3xl: 2rem;      /* 32px */
    --ct-radius-full: 9999px;
}

/* =====================================================
   SOMBRAS - Estilos existentes
   ===================================================== */

:root {
    --ct-shadow-xs: 0 1px 2px rgb(0 0 0 / 0.05);
    --ct-shadow-sm: 0 1px 3px rgb(0 0 0 / 0.1), 0 1px 2px rgb(0 0 0 / 0.06);
    --ct-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --ct-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    --ct-shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
    --ct-shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);

    /* Sombras existentes del sitio */
    --ct-shadow-soft: 0 8px 32px rgba(80, 164, 167, 0.08);
    --ct-shadow-card: 0 2px 8px rgba(45, 122, 124, 0.08);
}

/* =====================================================
   TRANSICIONES
   ===================================================== */

:root {
    --ct-transition-fast: 150ms;
    --ct-transition-base: 200ms;
    --ct-transition-normal: 300ms;
    --ct-transition-slow: 500ms;

    --ct-ease-default: ease;
    --ct-ease-in: ease-in;
    --ct-ease-out: ease-out;
    --ct-ease-in-out: ease-in-out;
}

/* =====================================================
   Z-INDEX SCALE
   ===================================================== */

:root {
    --ct-z-dropdown: 1000;
    --ct-z-sticky: 1020;
    --ct-z-fixed: 1030;
    --ct-z-modal-backdrop: 1040;
    --ct-z-modal: 1050;
    --ct-z-popover: 1060;
    --ct-z-tooltip: 1070;
}

/* =====================================================
   BREAKPOINTS (Responsive)
   ===================================================== */

:root {
    --ct-breakpoint-sm: 640px;   /* Mobile large */
    --ct-breakpoint-md: 768px;   /* Tablet */
    --ct-breakpoint-lg: 1024px;  /* Desktop */
    --ct-breakpoint-xl: 1280px;  /* Desktop large */
    --ct-breakpoint-2xl: 1536px; /* Extra large */
}

/* =====================================================
   ACCESIBILIDAD - Focus States
   ===================================================== */

:focus-visible {
    outline: 2px solid var(--ct-primary-500);
    outline-offset: 2px;
}

/* Skip Link */
.ct-skip-link {
    position: absolute;
    top: -100%;
    left: 0;
    background: var(--ct-primary-600);
    color: var(--ct-white);
    padding: var(--ct-space-3) var(--ct-space-4);
    text-decoration: none;
    z-index: var(--ct-z-tooltip);
    border-radius: 0 0 var(--ct-radius-md) 0;
    font-weight: var(--ct-font-medium);
}

.ct-skip-link:focus {
    top: 0;
}

/* Screen Reader Only */
.ct-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* =====================================================
   PREFERS-REDUCED-MOTION
   ===================================================== */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}