:root {
    /* Fondos */
    --color-bg:          #0a0a0a;
    --color-bg-soft:     #141414;
    --color-bg-elevated: #1c1c1c;
    --color-bg-overlay:  rgba(10, 10, 10, 0.95);

    /* Dorado (primary accent: CTAs, bordes premium, estados activos) */
    --color-gold:        #c9a961;
    --color-gold-light:  #e0c787;
    --color-gold-dark:   #8a7340;

    /* Sage green (secondary: trust chips, CoA verificado, analíticas, eco/legal) */
    --color-sage:        #7a9b5e;
    --color-sage-light:  #a0bd87;
    --color-sage-dark:   #4e6a3b;

    /* Oxblood (scarcity/urgency: countdown, -%, últimas unidades, no red cheap) */
    --color-burgundy:      #a03c2e;
    --color-burgundy-light:#c65848;
    --color-burgundy-dark: #6e2a20;

    /* Texto */
    --color-text:        #f5f1e8;
    --color-text-muted:  #a8a39a;
    --color-text-dim:    #6b6660;

    /* Bordes */
    --color-border:      #2a2a2a;
    --color-border-soft: #1c1c1c;

    /* Estados */
    --color-success:     #6b8e4e;
    --color-danger:      #c44536;
    --color-warning:     #d4a574;

    /* Espaciado (sistema 8pt) */
    --space-1:   8px;
    --space-2:  16px;
    --space-3:  24px;
    --space-4:  32px;
    --space-5:  48px;
    --space-6:  64px;
    --space-7:  96px;
    --space-8: 128px;

    /* Tipografía — Manrope single-family (más carácter que Inter, cero itálicas) */
    --font-display: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-heading: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-body:    'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-mono:    'JetBrains Mono', 'Courier New', monospace;

    /* Tamaños fluidos — escalados +25% sobre el original para máxima legibilidad.
       Base arranca en 1.18rem móvil (≈19px), 1.32rem desktop (≈21px).
       Párrafos más cómodos en lecturas largas (editorial/blog/trust).  */
    --fs-xs:   clamp(0.88rem, 0.82rem + 0.3vw, 1rem);
    --fs-sm:   clamp(1rem, 0.94rem + 0.4vw, 1.14rem);
    --fs-base: clamp(1.18rem, 1.06rem + 0.6vw, 1.32rem);
    --fs-lg:   clamp(1.35rem, 1.2rem + 0.75vw, 1.6rem);
    --fs-xl:   clamp(1.8rem, 1.45rem + 1.75vw, 2.65rem);
    --fs-2xl:  clamp(2.35rem, 1.75rem + 2.9vw, 4rem);
    --fs-3xl:  clamp(2.9rem, 2.1rem + 4vw, 5.6rem);

    /* Layout — contenedor un poco más ancho y menos padding */
    --container-max: 1440px;
    --container-pad-mobile: 5vw;
    --container-pad-desktop: 24px;

    /* Transiciones */
    --transition-base: 200ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 400ms cubic-bezier(0.4, 0, 0.2, 1);

    /* Sombras */
    --shadow-gold-glow:  0 0 32px rgba(201, 169, 97, 0.18);
    --shadow-card:       0 4px 24px rgba(0, 0, 0, 0.4);
    --shadow-card-idle:  0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-card-hover: 0 24px 48px -16px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(201, 169, 97, 0.25);

    /* === Tokens editoriales ============================================ */
    --overlay-hero-dark: linear-gradient(
        180deg,
        rgba(10, 10, 10, 0.82) 0%,
        rgba(10, 10, 10, 0.62) 45%,
        rgba(10, 10, 10, 0.92) 100%
    );
    --overlay-hero-side: linear-gradient(
        100deg,
        rgba(10, 10, 10, 0.94) 0%,
        rgba(10, 10, 10, 0.72) 45%,
        rgba(10, 10, 10, 0.32) 100%
    );

    /* Medidas tipográficas editoriales */
    --measure:        76ch;
    --measure-tight:  60ch;
    --measure-wide:   86ch;

    /* Duraciones y easing */
    --dur-fast:       180ms;
    --dur-med:        350ms;
    --dur-slow:       700ms;
    --ease-editorial: cubic-bezier(0.22, 1, 0.36, 1);

    /* Container fluido al 90% en móvil — un pelín más ancho que 86% */
    --container-width-mobile: 90%;
}