/* ============================================================
   Claud IA — COLOR TOKENS
   "IA práctica para mujeres" — moderno, claro, cercano, elegante
   ============================================================ */

:root {
  /* ---- Brand core (oficiales) ---- */
  --morado-profundo: #2D0B66;   /* color principal: logo, títulos */
  --lila-tecnologico: #A855F7;  /* degradados, secundarios */
  --rosa-coral: #EC4899;        /* acentos, detalles */
  --blanco: #FFFFFF;            /* fondos, respiración */

  /* ---- Morado (deep purple) scale ---- */
  --purple-950: #1A0640;
  --purple-900: #2D0B66;  /* = morado profundo */
  --purple-800: #3D1187;
  --purple-700: #51199E;
  --purple-600: #6B27C0;
  --purple-500: #8B3FE0;
  --purple-400: #A855F7;  /* = lila tecnológico */
  --purple-300: #C285FB;
  --purple-200: #DCB6FD;
  --purple-100: #EFE0FE;
  --purple-50:  #F8F2FF;

  /* ---- Coral / rosa scale ---- */
  --coral-700: #B91C6B;
  --coral-600: #DB2A7E;
  --coral-500: #EC4899;  /* = rosa coral */
  --coral-400: #F472B6;
  --coral-300: #F9A8D4;
  --coral-200: #FBCFE8;
  --coral-100: #FDE7F3;
  --coral-50:  #FEF1F8;

  /* ---- Neutrales (cálidos, ligeramente tintados a morado) ---- */
  --neutral-0:   #FFFFFF;
  --neutral-25:  #FBFAFE;
  --neutral-50:  #F6F4FB;
  --neutral-100: #EEEBF5;
  --neutral-200: #DDD8EA;
  --neutral-300: #C3BCD6;
  --neutral-400: #9C93B3;
  --neutral-500: #74698C;
  --neutral-600: #564B6E;
  --neutral-700: #3E3552;
  --neutral-800: #29223A;
  --neutral-900: #1A1428;
  --neutral-950: #100B1C;

  /* ---- Semánticos de estado ---- */
  --success: #16A571;
  --success-soft: #DBF5EC;
  --warning: #E5933B;
  --warning-soft: #FBEEDD;
  --danger: #E2476B;
  --danger-soft: #FCE3E9;
  --info: #6B27C0;
  --info-soft: var(--purple-100);

  /* ---- Gradiente oficial Claud IA ---- */
  --gradient-claudia: linear-gradient(120deg, #A855F7 0%, #EC4899 100%); /* @kind color */
  --gradient-claudia-soft: linear-gradient(120deg, #EFE0FE 0%, #FDE7F3 100%); /* @kind color */
  --gradient-deep: linear-gradient(135deg, #2D0B66 0%, #6B27C0 60%, #A855F7 100%); /* @kind color */
  --gradient-night: linear-gradient(160deg, #160A33 0%, #1A0640 55%, #2D0B66 100%); /* @kind color */

  /* ============================================================
     ALIAS SEMÁNTICOS  (usar estos en componentes)
     ============================================================ */

  /* Texto */
  --text-strong: var(--purple-900);
  --text-body: var(--neutral-700);
  --text-muted: var(--neutral-500);
  --text-subtle: var(--neutral-400);
  --text-on-brand: var(--blanco);
  --text-on-dark: var(--blanco);
  --text-link: var(--purple-600);

  /* Superficies */
  --surface-page: var(--neutral-25);
  --surface-card: var(--blanco);
  --surface-raised: var(--blanco);
  --surface-sunken: var(--neutral-50);
  --surface-brand-soft: var(--purple-50);
  --surface-coral-soft: var(--coral-50);
  --surface-dark: var(--purple-950);

  /* Bordes */
  --border-subtle: var(--neutral-100);
  --border-default: var(--neutral-200);
  --border-strong: var(--neutral-300);
  --border-brand: var(--purple-300);

  /* Acción primaria */
  --action-primary: var(--purple-400);
  --action-primary-hover: var(--purple-500);
  --action-primary-press: var(--purple-600);
  --focus-ring: color-mix(in srgb, var(--lila-tecnologico) 45%, transparent);
}