/*
 * LOYALTY SYSTEM — THEME VARIABLES
 * ─────────────────────────────────────────────────────────────────
 * Para personalizar por cliente, sobreescribir estas variables en
 * un archivo CSS propio del cliente y cargarlo DESPUÉS de este.
 *
 * Ejemplo:
 *   :root { --loy-primary: #c00; --loy-font-primary: 'Lato', sans-serif; }
 * ─────────────────────────────────────────────────────────────────
 */

:root {
  /* ── Colores oficiales Verisure 2025 ────────────── */
  --loy-primary:          #ed002f;
  --loy-primary-light:    #ab192d;
  --loy-primary-dark:     #ab192d;
  --loy-secondary:        #00a37d;
  --loy-secondary-dark:   #00bf9e;
  --loy-accent:           #00a37d;

  /* ── Texto ────────────────────────────────────── */
  --loy-text:             #262626;
  --loy-text-light:       #636466;
  --loy-text-dark:        #262626;
  --loy-link:             #ab192d;
  --loy-link-hover:       #ed002f;

  /* ── Fondos ───────────────────────────────────── */
  --loy-bg:               #f1f1f1;
  --loy-bg-alt:           #dcddde;
  --loy-bg-dark:          #3f000b;
  --loy-surface:          #ffffff;

  /* ── Bordes ───────────────────────────────────── */
  --loy-border:           #dcddde;
  --loy-radius:           4px 0 4px 0;
  --loy-radius-lg:        4px 0 4px 0;

  /* ── Tipografía ───────────────────────────────── */
  --loy-font-primary:     'Fira Sans', Arial, sans-serif;
  --loy-font-secondary:   'Fira Sans', Arial, sans-serif;
  --loy-font-size-base:   16px;
  --loy-line-height:      1.5;

  /* ── Navbar ───────────────────────────────────── */
  --loy-navbar-bg:        #ed002f;
  --loy-navbar-border:    rgba(255,255,255,.1);
  --loy-navbar-height:    60px;

  /* ── Botones ──────────────────────────────────── */
  --loy-btn-primary-bg:   var(--loy-primary);
  --loy-btn-primary-text: #ffffff;
  --loy-btn-secondary-bg: var(--loy-secondary);
  --loy-btn-secondary-text: var(--loy-text-dark);

  /* ── Sombras ──────────────────────────────────── */
  --loy-shadow-sm:        0 4px 20px rgba(38,38,38,.08);
  --loy-shadow:           0 4px 20px rgba(38,38,38,.08);
  --loy-shadow-lg:        0 8px 32px rgba(38,38,38,.16);

  /* ── Transiciones ─────────────────────────────── */
  --loy-transition:       .2s ease;

  /* ── Z-index layers ───────────────────────────── */
  --loy-z-navbar:         1030;
  --loy-z-modal:          1050;
  --loy-z-toast:          1100;

  /* ── Aliases directos para componentes ── */
  --primary:              var(--loy-primary);
  --primary-light:        var(--loy-primary-light);
  --primary-dark:         var(--loy-primary-dark);
  --accent:               var(--loy-secondary);
  --accent-dark:          var(--loy-secondary-dark);
  --text:                 var(--loy-text);
  --muted:                var(--loy-text-light);
  --surface:              var(--loy-surface);
  --surface-2:            var(--loy-bg-alt);
  --border:               var(--loy-border);
  --success:              #00a37d;
  --radius:               var(--loy-radius);
  --radius-sm:            4px 0 4px 0;
  --radius-lg:            var(--loy-radius-lg);
  --shadow:               var(--loy-shadow);
  --shadow-sm:            var(--loy-shadow-sm);
  --shadow-md:            var(--loy-shadow);
  --shadow-lg:            var(--loy-shadow-lg);
  --shadow-hover:         var(--loy-shadow-lg);
}

/* ── Overrides Bootstrap 5 con variables propias ── */
body {
  font-family: var(--loy-font-primary);
  font-size: var(--loy-font-size-base);
  color: var(--loy-text);
  background-color: var(--loy-bg);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--loy-link); }
a:hover { color: var(--loy-link-hover); }

.btn-primary {
  background-color: var(--loy-btn-primary-bg);
  border-color: var(--loy-btn-primary-bg);
  color: var(--loy-btn-primary-text);
}
.btn-primary:hover, .btn-primary:focus {
  background-color: var(--loy-primary-dark);
  border-color: var(--loy-primary-dark);
}
.btn-secondary {
  background-color: var(--loy-btn-secondary-bg);
  border-color: var(--loy-btn-secondary-bg);
  color: var(--loy-btn-secondary-text);
}
.btn-secondary:hover {
  background-color: var(--loy-secondary-dark);
  border-color: var(--loy-secondary-dark);
}

/* ── Utility aliases (compatibilidad con clases existentes) ── */
.accent_color_a { color: var(--loy-primary); }
.accent_color_b { color: var(--loy-secondary); }
.accent_color_c { color: var(--loy-primary-light); }
.accent_color_d { color: var(--loy-text-dark); }
.bg_primary      { background-color: var(--loy-primary); }
.bg_secondary    { background-color: var(--loy-secondary); }