/*
 * Fichero: variables.css
 * Descripción: Contiene todos los Design Tokens (variables CSS) globales para ProteckTech.
 * Uso: Mantiene la consistencia visual y facilita los cambios de tema (Dark/Light).
 * Prefijo: --ptk-
*/

:root {
    /* ========================= 1) Colores (Tema Claro - Por defecto) ========================= */

    /* -- Base -- */
    --ptk-color-bg: #0b0e14;
    /* fondo del hero oscuro ligero en secciones tech */
    --ptk-color-surface: #ffffff;
    /* superficies principales */
    --ptk-color-surface-2: #f6f8fb;
    /* superficies secundarias (ej. listas, cards en bg) */
    --ptk-color-text: #121417;
    /* texto primario */
    --ptk-color-text-muted: #5c6470;
    /* texto secundario/ayuda */

    /* -- Brand -- */
    --ptk-color-primary: #2166f3;
    /* azul tecnología (principal) */
    --ptk-color-primary-600: #1b56cb;
    /* primary al 600 */
    --ptk-color-primary-700: #1647a7;
    /* primary al 700 */
    --ptk-color-accent: #19c2b0;
    /* acento verde-teal para highlights */

    /* -- Feedback -- */
    --ptk-color-success: #17a772;
    --ptk-color-warning: #f5a524;
    --ptk-color-danger: #e5484d;
    --ptk-color-info: #2f7cf6;

    /* -- Bordes y estados -- */
    --ptk-color-border: #d7dbe3;
    /* borde base */
    --ptk-color-border-strong: #b8beca;
    /* borde más oscuro */
    --ptk-color-focus: #6aa6ff;
    /* anillos de enfoque accesibles (WCAG AA) */

    /* ========================= 2) Tipografía ========================= */

    --ptk-font-sans: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Inter, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
    --ptk-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;

    /* Escalas fluidas (clamp) */
    --ptk-text-xs: clamp(12px, 0.75vw, 13px);
    --ptk-text-sm: clamp(14px, 0.85vw, 15px);
    --ptk-text-md: clamp(16px, 1vw, 18px);
    /* cuerpo base un poco más grande */
    --ptk-text-lg: clamp(18px, 1.2vw, 22px);
    --ptk-text-xl: clamp(24px, 2vw, 28px);
    --ptk-text-2xl: clamp(32px, 3vw, 48px);
    /* Mucho más grande */
    --ptk-text-3xl: clamp(48px, 5vw, 80px);
    /* Gigante para Hero */

    --ptk-leading-tight: 1.15;
    --ptk-leading-normal: 1.5;
    --ptk-leading-loose: 1.7;

    --ptk-weight-regular: 400;
    --ptk-weight-medium: 500;
    --ptk-weight-semibold: 600;
    --ptk-weight-bold: 700;

    /* ========================= 3) Espacios y Layout ========================= */

    /* Radios */
    --ptk-radius-xs: 6px;
    --ptk-radius-sm: 10px;
    --ptk-radius-md: 14px;
    --ptk-radius-lg: 18px;
    --ptk-radius-xl: 24px;

    /* Espaciado (Escala 4x) */
    --ptk-space-1: 4px;
    --ptk-space-2: 8px;
    --ptk-space-3: 12px;
    --ptk-space-4: 16px;
    --ptk-space-6: 24px;
    --ptk-space-8: 32px;
    --ptk-space-10: 40px;
    --ptk-space-12: 48px;
    --ptk-space-16: 64px;

    /* Contenedor */
    --ptk-container-max: 1200px;
    /* Ancho máximo del contenido principal */
    --ptk-container-pad: 24px;
    /* Padding lateral del contenedor */

    /* Elevaciones/Sombras (Para Cards) */
    --ptk-shadow-sm: 0 2px 10px rgba(2, 6, 23, 0.05);
    --ptk-shadow-md: 0 8px 24px rgba(2, 6, 23, 0.08);
    --ptk-shadow-lg: 0 14px 40px rgba(2, 6, 23, 0.12);

    /* Motion (Animaciones) */
    --ptk-ease: cubic-bezier(0.16, 1, 0.3, 1);
    /* Ease out muy suave (Apple/Accenture style) */
    --ptk-dur-fast: 200ms;
    --ptk-dur: 400ms;
    --ptk-dur-slow: 800ms;
    --ptk-dur-hero: 1200ms;
    /* Para entrada inicial */

    /* ========================= 4) Breakpoints (Media Queries) ========================= */

    --ptk-bp-sm: 480px;
    /* Mobile Grande / Tablet Pequeña */
    --ptk-bp-md: 768px;
    /* Tablet */
    --ptk-bp-lg: 1024px;
    /* Laptop / Desktop */
    --ptk-bp-xl: 1280px;
    /* Desktop Grande */
}