/* =======================================================
   TEMA 2 — "Soft Relief" (Banco Mexicano · Neomorphism 2.0)
   Sistema de superficies monocromáticas con doble sombra.
   Soporta `data-theme="light"` (default) y `data-theme="dark"`.
   Cambiar las variables en :root[data-theme] = cambiar el look completo.
   ======================================================= */

:root,
:root[data-theme="light"] {
  /* ===== Light: base azul-gris muy clara ===== */
  --color-bg:             #E4EBF5;
  --color-bg-sink:        #DDE3ED;
  --color-surface:        #E4EBF5;
  --color-surface-raised: #E8EEF7;
  --color-surface-sunk:   #DCE3EE;

  /* Brand (rojo vino / carmesí profundo) */
  --color-accent:         #A11830;
  --color-accent-soft:    #C83A54;
  --color-accent-glow:    rgba(161, 24, 48, 0.35);
  --color-accent-ink:     #7A0F20;

  /* Texto */
  --color-text:           #2B3A55;
  --color-text-strong:    #1E2A42;
  --color-text-muted:     #7B8BA6;
  --color-text-dim:       #A5B0C2;

  /* Semánticos */
  --color-success:        #1DB087;
  --color-warning:        #E6A23C;
  --color-danger:         #A11830;

  /* Sombras (light: sombra oscura abajo-der, luz clara arriba-izq) */
  --shadow-light:         rgba(255, 255, 255, 1);
  --shadow-dark:          rgba(163, 177, 198, 0.55);
  --shadow-dark-strong:   rgba(130, 145, 168, 0.65);

  /* Gradientes neomorfos */
  --grad-bg:              linear-gradient(145deg, #ECF1FA 0%, #DCE3EE 100%);
  --grad-raised:          linear-gradient(145deg, #EEF3FB 0%, #D9E0EB 100%);
  --grad-sunk:            linear-gradient(145deg, #D9E0EB 0%, #EEF3FB 100%);
  --grad-accent:          linear-gradient(145deg, #C42141 0%, #7A0F20 100%);
  --grad-accent-soft:     linear-gradient(145deg, #C83A54 0%, #A11830 100%);

  /* Sombras compuestas — relieves neumórficos */
  --nm-raised-sm:
    4px 4px 10px var(--shadow-dark),
    -4px -4px 10px var(--shadow-light);
  --nm-raised:
    8px 8px 20px var(--shadow-dark),
    -8px -8px 20px var(--shadow-light);
  --nm-raised-lg:
    14px 14px 30px var(--shadow-dark),
    -14px -14px 30px var(--shadow-light);

  --nm-sunk-sm:
    inset 3px 3px 6px var(--shadow-dark),
    inset -3px -3px 6px var(--shadow-light);
  --nm-sunk:
    inset 5px 5px 12px var(--shadow-dark),
    inset -5px -5px 12px var(--shadow-light);
  --nm-sunk-lg:
    inset 7px 7px 18px var(--shadow-dark),
    inset -7px -7px 18px var(--shadow-light);

  --nm-pressed:
    inset 4px 4px 8px var(--shadow-dark-strong),
    inset -2px -2px 6px var(--shadow-light);

  /* Halos/glow de acento */
  --glow-accent:          0 8px 24px rgba(161, 24, 48, 0.35);
  --glow-accent-strong:   0 10px 30px rgba(161, 24, 48, 0.55);

  --ring-focus:           0 0 0 3px rgba(161, 24, 48, 0.25);

  /* ===== Glass (frosted) — para modales u overlays con efecto cristal ===== */
  --glass-bg-tint:        rgba(255, 255, 255, 0.36);
  --glass-bg-tint-strong: rgba(255, 255, 255, 0.52);
  --glass-border:         rgba(255, 255, 255, 0.55);
  --glass-border-edge:    rgba(255, 255, 255, 0.85);
  --glass-shadow:
    0 30px 60px -18px rgba(120, 140, 170, 0.45),
    0 14px 30px -12px rgba(120, 140, 170, 0.30),
    inset 0 1px 0 rgba(255, 255, 255, 0.70),
    inset 0 -1px 0 rgba(255, 255, 255, 0.15);
  --glass-highlight:      linear-gradient(145deg, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0.12) 40%, rgba(255,255,255,0.05) 100%);

  /* Tinte pastel (naranja → azul) — apenas visible */
  --glass-tint-pastel:
    linear-gradient(145deg,
      rgba(255, 180, 140, 0.32) 0%,
      rgba(255, 215, 190, 0.20) 40%,
      rgba(190, 210, 240, 0.22) 70%,
      rgba(140, 185, 235, 0.32) 100%);
}

:root[data-theme="dark"] {
  /* ===== Dark: gris muy oscuro ===== */
  --color-bg:             #1E2128;
  --color-bg-sink:        #1A1D23;
  --color-surface:        #22262E;
  --color-surface-raised: #272B34;
  --color-surface-sunk:   #1B1E24;

  --color-accent:         #C42141;
  --color-accent-soft:    #D8465F;
  --color-accent-glow:    rgba(196, 33, 65, 0.45);
  --color-accent-ink:     #D8465F;

  --color-text:           #E7ECF5;
  --color-text-strong:    #FFFFFF;
  --color-text-muted:     #8F99AE;
  --color-text-dim:       #5F6775;

  --color-success:        #34C99A;
  --color-warning:        #F1B857;
  --color-danger:         #D8465F;

  --shadow-light:         rgba(48, 52, 62, 0.85);
  --shadow-dark:          rgba(0, 0, 0, 0.70);
  --shadow-dark-strong:   rgba(0, 0, 0, 0.85);

  --grad-bg:              linear-gradient(145deg, #262A33 0%, #1A1D23 100%);
  --grad-raised:          linear-gradient(145deg, #2A2E37 0%, #1D2026 100%);
  --grad-sunk:            linear-gradient(145deg, #1D2026 0%, #2A2E37 100%);
  --grad-accent:          linear-gradient(145deg, #D8465F 0%, #8A1028 100%);
  --grad-accent-soft:     linear-gradient(145deg, #D8465F 0%, #A11830 100%);

  --nm-raised-sm:
    4px 4px 10px var(--shadow-dark),
    -4px -4px 10px var(--shadow-light);
  --nm-raised:
    8px 8px 20px var(--shadow-dark),
    -8px -8px 20px var(--shadow-light);
  --nm-raised-lg:
    14px 14px 30px var(--shadow-dark),
    -14px -14px 30px var(--shadow-light);

  --nm-sunk-sm:
    inset 3px 3px 6px var(--shadow-dark),
    inset -3px -3px 6px var(--shadow-light);
  --nm-sunk:
    inset 5px 5px 12px var(--shadow-dark),
    inset -5px -5px 12px var(--shadow-light);
  --nm-sunk-lg:
    inset 7px 7px 18px var(--shadow-dark),
    inset -7px -7px 18px var(--shadow-light);

  --nm-pressed:
    inset 4px 4px 8px var(--shadow-dark-strong),
    inset -2px -2px 6px var(--shadow-light);

  --glow-accent:          0 8px 24px rgba(196, 33, 65, 0.40);
  --glow-accent-strong:   0 10px 30px rgba(196, 33, 65, 0.60);

  --ring-focus:           0 0 0 3px rgba(196, 33, 65, 0.35);

  /* Glass en dark — tintes más fríos, bordes luminosos sutiles */
  --glass-bg-tint:        rgba(52, 58, 72, 0.42);
  --glass-bg-tint-strong: rgba(52, 58, 72, 0.62);
  --glass-border:         rgba(255, 255, 255, 0.14);
  --glass-border-edge:    rgba(255, 255, 255, 0.28);
  --glass-shadow:
    0 30px 60px -14px rgba(0, 0, 0, 0.70),
    0 14px 30px -10px rgba(0, 0, 0, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.15),
    inset 0 -1px 0 rgba(0, 0, 0, 0.35);
  --glass-highlight:      linear-gradient(145deg, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0.04) 40%, rgba(0,0,0,0.08) 100%);

  /* Pastel en dark — apenas visible */
  --glass-tint-pastel:
    linear-gradient(145deg,
      rgba(255, 155, 110, 0.24) 0%,
      rgba(225, 165, 135, 0.14) 40%,
      rgba(110, 150, 210, 0.16) 70%,
      rgba(90, 140, 215, 0.26) 100%);
}

:root {
  /* ===== No dependen del modo ===== */
  --font-family:          'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-display:         'Inter', sans-serif;

  --fs-xs:   0.75rem;
  --fs-sm:   0.875rem;
  --fs-md:   1rem;
  --fs-lg:   1.125rem;
  --fs-xl:   1.375rem;
  --fs-2xl:  1.75rem;
  --fs-3xl:  2.25rem;
  --fs-4xl:  3rem;

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semi:    600;
  --fw-bold:    700;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;

  --radius-sm:   10px;
  --radius-md:   16px;
  --radius-lg:   22px;
  --radius-xl:   30px;
  --radius-pill: 999px;

  --ease-out:     cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out:  cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:     180ms;
  --dur-base:     320ms;
  --dur-slow:     600ms;

  --app-max-width: 480px;
  --app-min-width: 320px;
  --safe-top:    env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);

  /* Alias heredados de tema 1 — mantienen compat con snippets que aún los referencian */
  --color-bg-deep:        var(--color-bg);
  --color-bg-mid:         var(--color-bg-sink);
  --color-bg-panel:       var(--color-surface);
  --color-brand:          var(--color-accent-ink);
  --color-brand-bright:   var(--color-accent);
  --glass-bg:             var(--color-surface);
  --glass-bg-strong:      var(--color-surface-raised);
  --glass-border:         transparent;
  --glass-border-strong:  transparent;
  --shadow-card:          var(--nm-raised);
  --shadow-btn:           var(--glow-accent);
  --blur-sm: 0px;
  --blur-md: 0px;
  --blur-lg: 0px;
}