:root {
    /* Colores primarios - Marca Profesional Desaturada */
    --primary-dark: #1B3A4B;      /* Azul marino base */
    --primary-blue: #4A7C9E;      /* Azul corporativo */
    --brand-pink: #B85D77;        /* Pink desaturado profesional */
    --brand-yellow: #D4A85C;      /* Yellow/dorado profesional */
    --brand-cyan: #5B9FB1;        /* Cyan desaturado profesional */
    
    /* Colores neutros */
    --dark-gray: #2C2C2C;
    --medium-gray: #555555;
    --light-gray: #F8F8F8;
    --white: #FFFFFF;
    
    /* Color de contraste */
    --contrast-accent: #D4A85C;
    --background-dark: #1B3A4B;
    --background-dark-soft: #21485d;
    --background-dark-deep: #102733;

    /* Superficies y texto */
    --surface-canvas: #f3f7fa;
    --surface-base: rgba(255, 255, 255, 0.88);
    --surface-soft: rgba(255, 255, 255, 0.72);
    --surface-muted: rgba(244, 248, 250, 0.92);
    --surface-dark: rgba(11, 28, 37, 0.68);
    --surface-glass: rgba(255, 255, 255, 0.08);
    --border-soft: rgba(27, 58, 75, 0.10);
    --border-strong: rgba(27, 58, 75, 0.18);
    --border-inverse: rgba(255, 255, 255, 0.14);
    --text-strong: #173241;
    --text-body: #4c6470;
    --text-soft: #6f8590;
    --text-inverse: rgba(255, 255, 255, 0.92);
    --text-inverse-soft: rgba(255, 255, 255, 0.70);

    /* Fondos y glows de marca */
    --gradient-brand: linear-gradient(135deg, #173241 0%, #21485d 56%, #1b3543 100%);
    --gradient-brand-soft: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(243, 247, 250, 0.94));
    --gradient-card: linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(246, 250, 252, 0.90));
    --gradient-button: linear-gradient(135deg, #b85d77 0%, #4a7c9e 100%);
    --gradient-button-hover: linear-gradient(135deg, #c46984 0%, #598ba7 100%);
    --gradient-halo-top:
        radial-gradient(ellipse 38% 24% at 14% 0%, rgba(184, 93, 119, 0.28) 0%, transparent 72%),
        radial-gradient(ellipse 34% 20% at 52% 0%, rgba(212, 168, 92, 0.24) 0%, transparent 74%),
        radial-gradient(ellipse 36% 22% at 86% 0%, rgba(91, 159, 177, 0.26) 0%, transparent 72%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0) 34%);
    --section-wash:
        radial-gradient(circle at 12% 0%, rgba(184, 93, 119, 0.05), transparent 22%),
        radial-gradient(circle at 86% 10%, rgba(91, 159, 177, 0.05), transparent 22%),
        linear-gradient(180deg, #f8fbfd 0%, #eef4f7 100%);
    --section-wash-alt:
        radial-gradient(circle at 15% 10%, rgba(91, 159, 177, 0.05), transparent 22%),
        radial-gradient(circle at 84% 0%, rgba(212, 168, 92, 0.05), transparent 20%),
        linear-gradient(180deg, #f5f9fb 0%, #edf3f7 100%);
    
    /* Tipografía */
    --font-primary: 'Plus Jakarta Sans', 'Inter', 'Segoe UI', 'Helvetica Neue', sans-serif;
    --font-heading: 'Plus Jakarta Sans', 'Space Grotesk', 'Inter', sans-serif;
    --font-brand: 'Plus Jakarta Sans', 'Space Grotesk', 'Inter', sans-serif;
    --font-button: 'Plus Jakarta Sans', 'Inter', 'Segoe UI', sans-serif;
    --font-secondary: Georgia, 'Times New Roman', serif;
    --font-size-base: 17px;
    /* Escala tipográfica unificada */
    --font-size-h1: clamp(2.4rem, 4vw, 3.4rem);   /* Títulos de sección principales */
    --font-size-h2: clamp(1.75rem, 2.6vw, 2.4rem); /* Títulos de sección regulares */
    --font-size-h3: clamp(1.1rem, 1.6vw, 1.4rem);  /* Títulos de tarjeta y sub-sección */
    --font-size-body: 1.05rem;
    --font-size-body-sm: 0.96rem;
    --font-size-kicker: 0.76rem;
    
    /* Espaciado */
    --spacing-xs: 0.5rem;
    --spacing-sm: 1.15rem;
    --spacing-md: 2.3rem;
    --spacing-lg: 3.4rem;
    --spacing-xl: 4.8rem;
    --spacing-2xl: clamp(5rem, 8vw, 7.5rem);
    --section-padding-y: clamp(4.4rem, 7vw, 6.5rem);
    --section-padding-x: clamp(1.25rem, 4vw, 3rem);

    /* --- User accent theme (overridden by JS when user picks a profile color) --- */
    --user-accent-rgb: 184, 93, 119;  /* default = brand-pink */

    /* --- Shadows semánticas --- */
    --shadow-sm:       0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.06);
    --shadow-md:       0 4px 12px rgba(0, 0, 0, 0.10), 0 2px 4px rgba(0, 0, 0, 0.06);
    --shadow-lg:       0 10px 30px rgba(0, 0, 0, 0.12), 0 4px 8px rgba(0, 0, 0, 0.08);
    --shadow-xl:       0 24px 60px rgba(0, 0, 0, 0.14), 0 8px 16px rgba(0, 0, 0, 0.08);
    --shadow-brand:    0 10px 30px rgba(var(--user-accent-rgb), 0.25);
    --shadow-brand-lg: 0 20px 50px rgba(var(--user-accent-rgb), 0.30);
    --shadow-soft:     0 16px 40px rgba(18, 41, 55, 0.08);
    --shadow-surface:  0 24px 60px rgba(18, 41, 55, 0.10);
    --shadow-float:    0 28px 72px rgba(11, 28, 37, 0.16);
    --shadow-glow:     0 0 0 1px rgba(255, 255, 255, 0.28) inset, 0 22px 54px rgba(18, 41, 55, 0.14);

    /* --- Border radius --- */
    --radius-sm:   8px;
    --radius-md:   12px;
    --radius-lg:   20px;
    --radius-xl:   28px;
    --radius-pill: 999px;

    /* --- Transitions --- */
    --transition-base:   all 0.3s ease;
    --transition-fast:   all 0.15s ease;
    --transition-bounce: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    --transition-smooth: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-premium: 360ms cubic-bezier(0.22, 1, 0.36, 1);
}