/* ==========================================================================
   Sumivolt · Tokens · Variables CSS de marca
   v0.1.1
   Fuente: docs/STITCH_REFERENCE.md
   ========================================================================== */

:root {
    /* === COLORES PRINCIPALES === */
    --color-azul-noche: #0B2F55;
    --color-verde-energia: #55D27A;
    --color-grafito: #1E252B;
    --color-gris-tecnico: #EEF2F4;
    --color-blanco: #FFFFFF;

    /* === COLORES DERIVADOS === */
    --color-borde: #D1D9E0;
    --color-texto-secundario: #43474E;
    --color-fondo-app: #F6FAFC;
    --color-azul-noche-hover: #001A36;
    --color-verde-energia-hover: #45B865;
    --color-gris-fila-hover: #F8FAFB;

    /* === COLORES FUNCIONALES === */
    --color-success: #55D27A;
    --color-success-bg: #E8F8EE;
    --color-success-text: #006D33;
    --color-warning: #F5B84B;
    --color-warning-bg: #FEF5E5;
    --color-warning-text: #8B5A00;
    --color-error: #D94A4A;
    --color-error-bg: #FDECEC;
    --color-error-text: #93000A;
    --color-info: #2F80ED;

    /* === TIPOGRAFÍA · FAMILIAS === */
    --font-display: 'Manrope', system-ui, -apple-system, sans-serif;
    --font-body: 'Inter', system-ui, -apple-system, sans-serif;

    /* === TIPOGRAFÍA · ESCALA === */
    /* Display (H1 hero) - fluido entre móvil y desktop */
    --text-display-size: clamp(2.125rem, 5vw, 3rem);          /* 34px - 48px */
    --text-display-line: 1.15;
    --text-display-weight: 800;
    --text-display-tracking: -0.02em;

    /* Headline XL (H2 secciones) */
    --text-headline-xl-size: clamp(1.75rem, 3.5vw, 2rem);     /* 28px - 32px */
    --text-headline-xl-line: 1.25;
    --text-headline-xl-weight: 700;
    --text-headline-xl-tracking: -0.01em;

    /* Headline LG (H3) */
    --text-headline-lg-size: 1.5rem;                          /* 24px */
    --text-headline-lg-line: 1.33;
    --text-headline-lg-weight: 600;

    /* Headline MD (H4, títulos de tarjeta) */
    --text-headline-md-size: 1.25rem;                         /* 20px */
    --text-headline-md-line: 1.4;
    --text-headline-md-weight: 600;

    /* Body LG (subtítulos hero, párrafos destacados) */
    --text-body-lg-size: 1.125rem;                            /* 18px */
    --text-body-lg-line: 1.555;

    /* Body MD (texto base) */
    --text-body-md-size: 1rem;                                /* 16px */
    --text-body-md-line: 1.5;

    /* Body SM (texto secundario, tarjetas) */
    --text-body-sm-size: 0.875rem;                            /* 14px */
    --text-body-sm-line: 1.43;

    /* Label MD (microclaims, badges) */
    --text-label-md-size: 0.75rem;                            /* 12px */
    --text-label-md-line: 1.33;
    --text-label-md-weight: 600;
    --text-label-md-tracking: 0.05em;

    /* === ESPACIADO BASE (múltiplos de 4px) === */
    --space-1: 0.25rem;     /* 4px */
    --space-2: 0.5rem;      /* 8px */
    --space-3: 0.75rem;     /* 12px */
    --space-4: 1rem;        /* 16px */
    --space-5: 1.25rem;     /* 20px */
    --space-6: 1.5rem;      /* 24px */
    --space-8: 2rem;        /* 32px */
    --space-10: 2.5rem;     /* 40px */
    --space-12: 3rem;       /* 48px */
    --space-14: 3.5rem;     /* 56px */
    --space-16: 4rem;       /* 64px */
    --space-20: 5rem;       /* 80px */
    --space-24: 6rem;       /* 96px */
    --space-32: 8rem;       /* 128px */

    /* === LAYOUT === */
    --container-max: 1280px;
    --container-padding-mobile: 1rem;       /* 16px */
    --container-padding-tablet: 2rem;       /* 32px */
    --container-padding-desktop: 4rem;      /* 64px */

    /* Sección padding vertical (responsive) */
    --section-py: clamp(4rem, 8vw, 8rem);   /* 64px → 128px */

    /* Header */
    --header-height: 5rem;                  /* 80px */

    /* === BORDER RADIUS === */
    --radius-sm: 0.25rem;       /* 4px */
    --radius-md: 0.5rem;        /* 8px */
    --radius-lg: 0.75rem;       /* 12px */
    --radius-xl: 1rem;          /* 16px */
    --radius-full: 9999px;

    /* === SOMBRAS === */
    --shadow-ambient: 0 4px 20px rgba(11, 47, 85, 0.05);
    --shadow-card-hover: 0 8px 24px rgba(11, 47, 85, 0.08);
    --shadow-button-hover: 0 4px 12px rgba(85, 210, 122, 0.20);
    --shadow-header: 0 1px 3px rgba(11, 47, 85, 0.06);

    /* === BREAKPOINTS (referencia, se usan en media queries) === */
    /* --bp-tablet: 768px */
    /* --bp-desktop: 1024px */
    /* --bp-wide: 1280px */

    /* === TRANSICIONES === */
    --transition-fast: 150ms ease;
    --transition-base: 200ms ease;
    --transition-slow: 300ms ease;

    /* === Z-INDEX === */
    --z-header: 50;
    --z-dropdown: 100;
    --z-modal: 1000;
}