/* =====================================================================
   Moda Sin Género — Design Tokens v2
   Paleta multi-tono + superficies tintadas + motivos culturales
   ===================================================================== */

:root {
    /* Tipografía */
    --font-sans: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --fw-regular: 400;  --fw-medium: 500;  --fw-semibold: 600;  --fw-bold: 700;
    --fs-xs: .75rem;  --fs-sm: .875rem;  --fs-base: 1rem;  --fs-md: 1.125rem;
    --fs-lg: 1.25rem;  --fs-xl: 1.5rem;  --fs-2xl: 1.875rem;  --fs-3xl: 2.25rem;
    --lh-tight: 1.2;  --lh-snug: 1.35;  --lh-normal: 1.55;

    /* Espaciado */
    --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px;  --sp-4: 16px;
    --sp-5: 20px;  --sp-6: 24px;  --sp-8: 32px;  --sp-10: 40px;
    --sp-12: 48px;  --sp-16: 64px;

    /* Radios (ajustables por data-radius) */
    --r-sm: 8px;  --r-md: 14px;  --r-lg: 20px;  --r-xl: 28px;  --r-full: 999px;

    /* Transiciones */
    --t-fast: 120ms cubic-bezier(.2,.7,.3,1);
    --t-base: 200ms cubic-bezier(.2,.7,.3,1);
    --t-slow: 320ms cubic-bezier(.2,.7,.3,1);

    /* Layout */
    --header-h: 60px;  --bottom-nav-h: 64px;  --container-max: 1200px;
    --safe-top: env(safe-area-inset-top, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);

    /* Z-index */
    --z-header: 100;  --z-bottomnav: 100;  --z-overlay: 200;
    --z-modal: 300;  --z-toast: 400;

    /* Acento por defecto — bosque */
    --accent-h: 150;
    --accent-s-light: 42%;  --accent-l-light: 32%;
    --accent-s-dark:  38%;  --accent-l-dark:  62%;

    /* Offsets de la paleta multi-tono */
    --accent-2-offset: 35;
    --accent-3-offset: 150;

    /* Temperatura de superficies (desplaza hue del tinte) */
    --temp-offset: 0;

    /* Modo por defecto */
    --contrast-factor: 1;
}

/* =====================================================================
   ACENTOS CULTURALES (sin cambios en hue)
   ===================================================================== */
[data-accent="jade"]           { --accent-h: 158; --accent-s-light: 42%; --accent-l-light: 34%; --accent-s-dark: 40%; --accent-l-dark: 62%; }
[data-accent="cempasuchil"]    { --accent-h:  28; --accent-s-light: 82%; --accent-l-light: 46%; --accent-s-dark: 80%; --accent-l-dark: 66%; }
[data-accent="rosa-mexicano"]  { --accent-h: 345; --accent-s-light: 68%; --accent-l-light: 50%; --accent-s-dark: 62%; --accent-l-dark: 70%; }
[data-accent="azul-maya"]      { --accent-h: 200; --accent-s-light: 62%; --accent-l-light: 34%; --accent-s-dark: 55%; --accent-l-dark: 64%; }
[data-accent="terracota"]      { --accent-h:  15; --accent-s-light: 58%; --accent-l-light: 42%; --accent-s-dark: 52%; --accent-l-dark: 66%; }

[data-accent="azul-maya-gt"]   { --accent-h: 205; --accent-s-light: 68%; --accent-l-light: 34%; --accent-s-dark: 60%; --accent-l-dark: 64%; }
[data-accent="rojo-tejido"]    { --accent-h:   5; --accent-s-light: 62%; --accent-l-light: 42%; --accent-s-dark: 58%; --accent-l-dark: 66%; }
[data-accent="verde-selva"]    { --accent-h: 140; --accent-s-light: 42%; --accent-l-light: 28%; --accent-s-dark: 38%; --accent-l-dark: 60%; }
[data-accent="amarillo-maiz"]  { --accent-h:  45; --accent-s-light: 78%; --accent-l-light: 44%; --accent-s-dark: 72%; --accent-l-dark: 64%; }
[data-accent="indigo-gt"]      { --accent-h: 230; --accent-s-light: 42%; --accent-l-light: 32%; --accent-s-dark: 45%; --accent-l-dark: 66%; }

[data-accent="azul-karabela"]  { --accent-h: 220; --accent-s-light: 65%; --accent-l-light: 34%; --accent-s-dark: 58%; --accent-l-dark: 66%; }
[data-accent="rojo-bandera-ht"]{ --accent-h:   0; --accent-s-light: 62%; --accent-l-light: 42%; --accent-s-dark: 58%; --accent-l-dark: 66%; }
[data-accent="verde-tropical"] { --accent-h: 155; --accent-s-light: 52%; --accent-l-light: 32%; --accent-s-dark: 46%; --accent-l-dark: 62%; }
[data-accent="indigo-naif"]    { --accent-h: 245; --accent-s-light: 48%; --accent-l-light: 38%; --accent-s-dark: 50%; --accent-l-dark: 68%; }
[data-accent="arena"]          { --accent-h:  35; --accent-s-light: 32%; --accent-l-light: 46%; --accent-s-dark: 28%; --accent-l-dark: 70%; }

[data-accent="rojo-imperial"]  { --accent-h: 355; --accent-s-light: 72%; --accent-l-light: 38%; --accent-s-dark: 66%; --accent-l-dark: 64%; }
[data-accent="dorado"]         { --accent-h:  42; --accent-s-light: 74%; --accent-l-light: 44%; --accent-s-dark: 68%; --accent-l-dark: 62%; }
[data-accent="jade-cn"]        { --accent-h: 160; --accent-s-light: 38%; --accent-l-light: 38%; --accent-s-dark: 34%; --accent-l-dark: 64%; }
[data-accent="porcelana"]      { --accent-h: 210; --accent-s-light: 42%; --accent-l-light: 44%; --accent-s-dark: 38%; --accent-l-dark: 66%; }
[data-accent="tinta"]          { --accent-h: 220; --accent-s-light:  8%; --accent-l-light: 26%; --accent-s-dark:  6%; --accent-l-dark: 68%; }

[data-accent="azul-caribe"]    { --accent-h: 200; --accent-s-light: 58%; --accent-l-light: 38%; --accent-s-dark: 52%; --accent-l-dark: 66%; }
[data-accent="rojo-bandera-cu"]{ --accent-h: 355; --accent-s-light: 68%; --accent-l-light: 42%; --accent-s-dark: 62%; --accent-l-dark: 66%; }
[data-accent="amarillo-colonial"]{--accent-h: 48; --accent-s-light: 68%; --accent-l-light: 46%; --accent-s-dark: 64%; --accent-l-dark: 64%; }
[data-accent="verde-palma"]    { --accent-h: 130; --accent-s-light: 42%; --accent-l-light: 32%; --accent-s-dark: 38%; --accent-l-dark: 62%; }
[data-accent="hueso"]          { --accent-h:  30; --accent-s-light: 18%; --accent-l-light: 46%; --accent-s-dark: 15%; --accent-l-dark: 72%; }

[data-accent="amarillo-ve"]    { --accent-h:  48; --accent-s-light: 78%; --accent-l-light: 46%; --accent-s-dark: 72%; --accent-l-dark: 64%; }
[data-accent="azul-ve"]        { --accent-h: 210; --accent-s-light: 68%; --accent-l-light: 36%; --accent-s-dark: 60%; --accent-l-dark: 64%; }
[data-accent="rojo-ve"]        { --accent-h:   0; --accent-s-light: 62%; --accent-l-light: 42%; --accent-s-dark: 58%; --accent-l-dark: 66%; }
[data-accent="verde-caribe"]   { --accent-h: 170; --accent-s-light: 42%; --accent-l-light: 32%; --accent-s-dark: 38%; --accent-l-dark: 62%; }
[data-accent="tierra"]         { --accent-h:  25; --accent-s-light: 38%; --accent-l-light: 38%; --accent-s-dark: 34%; --accent-l-dark: 66%; }

[data-accent="bosque"]         { --accent-h: 150; --accent-s-light: 38%; --accent-l-light: 32%; --accent-s-dark: 35%; --accent-l-dark: 62%; }
[data-accent="musgo"]          { --accent-h:  90; --accent-s-light: 28%; --accent-l-light: 36%; --accent-s-dark: 26%; --accent-l-dark: 62%; }
[data-accent="salvia"]         { --accent-h: 140; --accent-s-light: 22%; --accent-l-light: 46%; --accent-s-dark: 22%; --accent-l-dark: 70%; }
[data-accent="eucalipto"]      { --accent-h: 165; --accent-s-light: 32%; --accent-l-light: 38%; --accent-s-dark: 28%; --accent-l-dark: 64%; }
[data-accent="piedra"]         { --accent-h:  30; --accent-s-light:  8%; --accent-l-light: 40%; --accent-s-dark:  6%; --accent-l-dark: 70%; }

/* =====================================================================
   TEMPERATURA — desplaza el hue del tinte de superficies
   ===================================================================== */
[data-temperature="warm"]    { --temp-offset: -35; --temp-sat-boost: 1.10; }
[data-temperature="neutral"] { --temp-offset:   0; --temp-sat-boost: 1.00; }
[data-temperature="cool"]    { --temp-offset:  40; --temp-sat-boost: 1.15; }

/* =====================================================================
   RADIO
   ===================================================================== */
[data-radius="round"]  { --r-sm: 14px; --r-md: 22px; --r-lg: 30px; --r-xl: 44px; }
[data-radius="soft"]   { --r-sm:  8px; --r-md: 14px; --r-lg: 20px; --r-xl: 28px; }
[data-radius="square"] { --r-sm:  0px; --r-md:  2px; --r-lg:  3px; --r-xl:  6px; }

/* =====================================================================
   RESOLUCIÓN DEL ACENTO (compartida)
   ===================================================================== */
:root,
[data-theme="light"],
[data-theme="dark"] {
    --accent:        hsl(var(--accent-h), var(--accent-s), var(--accent-l));
    --accent-hover:  hsl(var(--accent-h), var(--accent-s), calc(var(--accent-l) - 6%));
    --accent-active: hsl(var(--accent-h), var(--accent-s), calc(var(--accent-l) - 12%));
    --accent-soft:   hsl(var(--accent-h), calc(var(--accent-s) * 0.55), 94%);
    --accent-softer: hsl(var(--accent-h), calc(var(--accent-s) * 0.40), 97%);
    --accent-ring:   hsl(var(--accent-h), var(--accent-s), var(--accent-l));

    /* Multi-tono */
    --accent-2:        hsl(calc(var(--accent-h) + var(--accent-2-offset)), calc(var(--accent-s) * 0.85), calc(var(--accent-l) + 6%));
    --accent-2-soft:   hsl(calc(var(--accent-h) + var(--accent-2-offset)), calc(var(--accent-s) * 0.40), 92%);
    --accent-3:        hsl(calc(var(--accent-h) + var(--accent-3-offset)), calc(var(--accent-s) * 0.70), calc(var(--accent-l) + 8%));
    --accent-3-soft:   hsl(calc(var(--accent-h) + var(--accent-3-offset)), calc(var(--accent-s) * 0.35), 93%);
}

[data-theme="dark"] {
    --accent-hover:  hsl(var(--accent-h), var(--accent-s), calc(var(--accent-l) + 5%));
    --accent-active: hsl(var(--accent-h), var(--accent-s), calc(var(--accent-l) + 10%));
    --accent-soft:   hsl(var(--accent-h), calc(var(--accent-s) * 0.35), 15%);
    --accent-softer: hsl(var(--accent-h), calc(var(--accent-s) * 0.25), 11%);

    --accent-2:      hsl(calc(var(--accent-h) + var(--accent-2-offset)), calc(var(--accent-s) * 0.75), calc(var(--accent-l) + 2%));
    --accent-2-soft: hsl(calc(var(--accent-h) + var(--accent-2-offset)), calc(var(--accent-s) * 0.30), 14%);
    --accent-3:      hsl(calc(var(--accent-h) + var(--accent-3-offset)), calc(var(--accent-s) * 0.55), calc(var(--accent-l) + 4%));
    --accent-3-soft: hsl(calc(var(--accent-h) + var(--accent-3-offset)), calc(var(--accent-s) * 0.25), 12%);
}

/* =====================================================================
   MODO CLARO — superficies TINTADAS con el hue del acento
   ===================================================================== */
[data-theme="light"] {
    --accent-s: var(--accent-s-light);
    --accent-l: var(--accent-l-light);

    --tint-h: calc(var(--accent-h) + var(--temp-offset));

    --bg:        hsl(var(--tint-h), calc(26% * var(--temp-sat-boost)), 90%);
    --bg-elev:   hsl(var(--tint-h), calc(22% * var(--temp-sat-boost)), 94%);
    --surface:   hsl(var(--tint-h), calc(18% * var(--temp-sat-boost)), 96%);
    --surface-2: hsl(var(--tint-h), calc(30% * var(--temp-sat-boost)), 85%);
    --surface-3: hsl(var(--tint-h), calc(34% * var(--temp-sat-boost)), 79%);

    --border:        hsl(var(--tint-h), calc(30% * var(--temp-sat-boost)), 74%);
    --border-strong: hsl(var(--tint-h), calc(36% * var(--temp-sat-boost)), 60%);

    --text:            hsl(220, 18%, 12%);
    --text-muted:      hsl(220, 12%, 34%);
    --text-subtle:     hsl(220,  9%, 50%);
    --text-inverse:    hsl(0, 0%, 100%);

    --shadow-sm:       0 1px 2px hsl(var(--tint-h), 30%, 20% / .08);
    --shadow-md:       0 4px 18px hsl(var(--tint-h), 30%, 20% / .12);
    --shadow-lg:       0 14px 40px hsl(var(--tint-h), 30%, 20% / .16);

    --accent-contrast: hsl(0, 0%, 100%);
}

/* =====================================================================
   MODO OSCURO — superficies TINTADAS con el hue del acento
   ===================================================================== */
[data-theme="dark"] {
    --accent-s: var(--accent-s-dark);
    --accent-l: var(--accent-l-dark);

    --tint-h: calc(var(--accent-h) + var(--temp-offset));

    --bg:        hsl(var(--tint-h), calc(20% * var(--temp-sat-boost)), 6%);
    --bg-elev:   hsl(var(--tint-h), calc(24% * var(--temp-sat-boost)), 8.5%);
    --surface:   hsl(var(--tint-h), calc(22% * var(--temp-sat-boost)), 10.5%);
    --surface-2: hsl(var(--tint-h), calc(26% * var(--temp-sat-boost)), 14.5%);
    --surface-3: hsl(var(--tint-h), calc(28% * var(--temp-sat-boost)), 18.5%);

    --border:        hsl(var(--tint-h), calc(28% * var(--temp-sat-boost)), 20%);
    --border-strong: hsl(var(--tint-h), calc(32% * var(--temp-sat-boost)), 30%);

    --text:         hsl(var(--tint-h), 12%, 94%);
    --text-muted:   hsl(var(--tint-h), 10%, 66%);
    --text-subtle:  hsl(var(--tint-h),  8%, 48%);
    --text-inverse: hsl(var(--tint-h), 15%, 8%);

    --shadow-sm: 0 1px 2px hsl(0 0% 0% / .5);
    --shadow-md: 0 4px 22px hsl(0 0% 0% / .55);
    --shadow-lg: 0 14px 48px hsl(0 0% 0% / .65);

    --accent-contrast: hsl(var(--tint-h), 15%, 8%);
}

/* =====================================================================
   CONTRASTE
   ===================================================================== */
[data-contrast="soft"] {
    --text:        hsl(220, 12%, 28%);
    --text-muted:  hsl(220,  8%, 52%);
    --text-subtle: hsl(220,  6%, 66%);
    --border:        hsl(var(--tint-h), calc(20% * var(--temp-sat-boost)), 88%);
    --border-strong: hsl(var(--tint-h), calc(24% * var(--temp-sat-boost)), 78%);
}
[data-theme="dark"][data-contrast="soft"] {
    --text:        hsl(var(--tint-h), 10%, 86%);
    --text-muted:  hsl(var(--tint-h),  8%, 60%);
    --text-subtle: hsl(var(--tint-h),  6%, 44%);
}

[data-contrast="standard"] { /* usar defaults de [data-theme] */ }


[data-contrast="high"] {
    --text:          hsl(220, 24%, 4%);
    --text-muted:    hsl(220, 16%, 22%);
    --text-subtle:   hsl(220, 12%, 38%);
    --border:        hsl(var(--tint-h), calc(40% * var(--temp-sat-boost)), 68%);
    --border-strong: hsl(var(--tint-h), calc(45% * var(--temp-sat-boost)), 50%);
}
[data-theme="dark"][data-contrast="high"] {
    --text:          hsl(var(--tint-h), 18%, 99%);
    --text-muted:    hsl(var(--tint-h), 14%, 82%);
    --text-subtle:   hsl(var(--tint-h), 10%, 66%);
    --border:        hsl(var(--tint-h), calc(34% * var(--temp-sat-boost)), 28%);
    --border-strong: hsl(var(--tint-h), calc(38% * var(--temp-sat-boost)), 42%);
}

/* =====================================================================
   MOTIVOS CULTURALES — máscaras SVG geométricas
   Se aplican con mask-image sobre fondos del color del acento.
   ===================================================================== */
[data-culture="MX"] {
    --pattern-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'><path d='M0 30h8v-8h8v8h8v-8h8v8h8' fill='none' stroke='black' stroke-width='2'/></svg>");
    --pattern-size: 40px 40px;
}
[data-culture="GT"] {
    --pattern-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'><path d='M12 2L22 12L12 22L2 12Z' fill='none' stroke='black' stroke-width='1.5'/><circle cx='12' cy='12' r='1.5' fill='black'/></svg>");
    --pattern-size: 24px 24px;
}
[data-culture="HT"] {
    --pattern-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'><circle cx='14' cy='6' r='2' fill='black'/><circle cx='14' cy='14' r='2' fill='black'/><circle cx='14' cy='22' r='2' fill='black'/><circle cx='6' cy='14' r='2' fill='black'/><circle cx='22' cy='14' r='2' fill='black'/></svg>");
    --pattern-size: 28px 28px;
}
[data-culture="CN"] {
    --pattern-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='48' height='24' viewBox='0 0 48 24'><path d='M0 16 Q6 8 12 16 T24 16 T36 16 T48 16' fill='none' stroke='black' stroke-width='2'/><path d='M0 22 Q6 14 12 22 T24 22 T36 22 T48 22' fill='none' stroke='black' stroke-width='2'/></svg>");
    --pattern-size: 48px 24px;
}
[data-culture="CU"] {
    --pattern-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'><path d='M16 2L18 14L30 16L18 18L16 30L14 18L2 16L14 14Z' fill='black'/></svg>");
    --pattern-size: 32px 32px;
}
[data-culture="VE"] {
    --pattern-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'><path d='M10 2 L14 10 L10 18 L6 10 Z' fill='none' stroke='black' stroke-width='1.5'/></svg>");
    --pattern-size: 20px 20px;
}
[data-culture="OT"] {
    --pattern-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'><circle cx='10' cy='10' r='1.5' fill='black'/></svg>");
    --pattern-size: 20px 20px;
}