/*
  Registro de IMEI color theme
  Remaps Collective purple/brightpurple utilities to the registrodeimei.cl palette.
*/

:root {
  /* Core brand */
  --brand-primary-50: #eef2ff;
  --brand-primary-100: #dce4ff;
  --brand-primary-200: #aabdff;
  --brand-primary-300: #7a95ff;
  --brand-primary-400: #4f70ff;
  --brand-primary-500: #2b59ff;
  --brand-primary-600: #1f45d6;
  --brand-primary-700: #1836ad;
  --brand-primary-800: #122884;
  --brand-primary-900: #0c1b5c;

  --brand-accent-lime: #b4f878;
  --brand-accent-whatsapp: #25d366;

  --brand-ink: #101010;
  --brand-text: #33373d;
  --brand-muted: #757575;
  --brand-border: #e8eaed;
  --brand-surface: #fafafa;
  --brand-white: #ffffff;

  /* Semantic aliases used by overrides */
  --color-brand: var(--brand-primary-500);
  --color-brand-hover: var(--brand-primary-600);
  --color-brand-soft: var(--brand-primary-50);
  --color-brand-tint: var(--brand-primary-100);
  --color-focus: var(--brand-primary-500);
}

/* ---- Buttons (Collective component tokens) ---- */
.button,
.button-brightpurple {
  --button-bg: var(--brand-primary-500);
  --button-bg-hover: var(--brand-primary-600);
  --button-bg-hover-outlined: var(--brand-primary-50);
  --button-solid-text: var(--brand-white);
  --button-text: var(--brand-primary-500);
  --button-text-hover: var(--brand-primary-600);
  --button-border: var(--brand-primary-500);
  --button-border-hover: var(--brand-primary-600);
}

.button-outlined.button-brightpurple,
.button-outlined.button-secondary {
  --button-text: var(--brand-primary-500);
  --button-border: var(--brand-primary-500);
}

/* Default solid button was Collective purple */
.button:not(.button-outlined):not(.button-text):not(.button-secondary):not(.button-whatsapp) {
  background-color: var(--brand-primary-500);
  color: var(--brand-white);
}

.button:not(.button-outlined):not(.button-text):not(.button-secondary):not(.button-whatsapp):hover {
  background-color: var(--brand-primary-600);
}

/* ---- Bright purple scale → brand blue ---- */
.bg-brightpurple-50 { background-color: var(--brand-primary-50) !important; }
.bg-brightpurple-100 { background-color: var(--brand-primary-100) !important; }
.bg-brightpurple-200 { background-color: var(--brand-primary-200) !important; }
.bg-brightpurple-300 { background-color: var(--brand-primary-300) !important; }
.bg-brightpurple-400 { background-color: var(--brand-primary-400) !important; }
.bg-brightpurple-500 { background-color: var(--brand-primary-500) !important; }
.bg-brightpurple-600 { background-color: var(--brand-primary-600) !important; }
.bg-brightpurple-700 { background-color: var(--brand-primary-700) !important; }

.text-brightpurple-500 { color: var(--brand-primary-500) !important; }
.text-brightpurple-600 { color: var(--brand-primary-600) !important; }
.text-brightpurple-700 { color: var(--brand-primary-700) !important; }
.text-brightpurple-800 { color: var(--brand-primary-800) !important; }

.border-brightpurple-500 { border-color: var(--brand-primary-500) !important; }

/* ---- Purple scale → brand blue ---- */
.bg-purple-50,
.bg-purple-50\/90 { background-color: var(--brand-primary-50) !important; }
.bg-purple-100 { background-color: var(--brand-primary-100) !important; }
.bg-purple-300 { background-color: var(--brand-primary-300) !important; }
.bg-purple-400 { background-color: var(--brand-primary-400) !important; }
.bg-purple-500 { background-color: var(--brand-primary-500) !important; }
.bg-purple-600 { background-color: var(--brand-primary-600) !important; }
.bg-purple-900 { background-color: var(--brand-primary-900) !important; }

.text-purple-200 { color: var(--brand-primary-200) !important; }
.text-purple-500 { color: var(--brand-primary-500) !important; }
.text-purple-700 { color: var(--brand-primary-700) !important; }

.border-purple-200 { border-color: var(--brand-primary-200) !important; }
.border-purple-300 { border-color: var(--brand-primary-300) !important; }
.border-purple-500,
.border-t-purple-500 { border-color: var(--brand-primary-500) !important; }

.hover\:bg-purple-500:hover { background-color: var(--brand-primary-500) !important; }
.hover\:text-purple-200:hover { color: var(--brand-primary-200) !important; }
.hover\:text-purple-700:hover { color: var(--brand-primary-700) !important; }
.group:hover .group-hover\:fill-white { fill: var(--brand-white); }

/* Focus rings */
:focus-visible {
  outline-color: var(--color-focus);
}