/* Tokens visuales de Yimi (PLAN_PANEL_ADMIN §2.1, extraídos del CSS de yimiglobal.com). */
:root {
  color-scheme: light;

  /* Azul de marca (escala real de Yimi) */
  --blue-0: #f3f6fe;
  --blue-1: #ecf1ff;
  --blue-2: #d9ebff;
  --blue-3: #b3d6ff;
  --blue-4: #90bbfb;
  --blue-5: #6696ff;
  --blue-6: #3374ff;
  --blue-7: #0051ff; /* marca */
  --blue-8: #003ab8;
  --blue-9: #000f66;
  --blue-100: #04153c;

  /* Gris azulado: textos y bordes */
  --bgray-0: #f2f3f6;
  --bgray-1: #edeff2;
  --bgray-2: #d8dee6;
  --bgray-3: #b5bfcf;
  --bgray-4: #a7b1c0;
  --bgray-5: #8c98ab;
  --bgray-6: #6c7789;
  --bgray-7: #4d596a;
  --bgray-8: #333b48;
  --bgray-9: #2b3340;
  --bgray-10: #1e222a;
  --bgray-11: #15181e;

  /* Gris neutro: superficies */
  --gray-0: #ffffff;
  --gray-1: #f7f7f8;
  --gray-2: #e8e9ea;
  --gray-3: #dcdfe4;
  --gray-4: #c5c6c9;
  --gray-6: #a0a2a7;
  --gray-7: #7c7e83;
  --gray-8: #545659;
  --gray-9: #2d2d2f;

  /* Estados */
  --green-10: #f3fcf3;
  --green-20: #d0f1d0;
  --green-50: #32b332;
  --green-60: #22a022;
  --green-70: #138613;
  --green-80: #097109;
  --orange-10: #fff5eb;
  --orange-20: #ffe7cc;
  --orange-50: #ffa033;
  --orange-60: #ff8800;
  --orange-70: #d67200;
  --orange-80: #a35600; /* propio (no está en Yimi): texto ámbar con contraste AA sobre --orange-10 */
  --yellow-10: #fdf3d8;
  --yellow-50: #f1b50e;
  --yellow-60: #d49c02;
  --yellow-70: #9e7605;
  --yellow-80: #705200;
  --red-05: #fdf2f2;
  --red-10: #fae5e5;
  --red-50: #f42d2d;
  --red-70: #cc0000;
  --red-80: #8f0d0d;
  --purple-10: #f7f3ff;
  --purple-60: #b647ff;
  --purple-80: #780cc0;

  /* Semánticos (mismos nombres que usa Yimi) */
  --bg-app: var(--blue-0); /* fondo general de la app (--bg-bg en Yimi) */
  --bg-surface-0: var(--gray-0); /* tarjetas, sidebar, topbar */
  --bg-surface-1: var(--gray-1); /* encabezados de tabla, secciones alternas */
  --bg-surface-2: var(--bgray-0);
  --bg-brand: var(--blue-7);
  --bg-brand-hover: var(--blue-8);
  --bg-brand-soft: var(--blue-1);
  --border: var(--bgray-1); /* 1px en tarjetas y separadores */
  --border-strong: var(--bgray-2); /* inputs */
  --focus-ring: #384dc7; /* --border-focus-outline en Yimi */
  --text-primary: var(--bgray-8);
  --text-secondary: var(--bgray-7);
  /* bgray-5 no llega a AA (2.9:1) sobre blanco; bgray-6 da 4.5:1 */
  --text-tertiary: var(--bgray-6);
  --text-placeholder: var(--bgray-4);
  --text-inverse: #ffffff;
  --text-link: var(--blue-7);
  --text-success: var(--green-70);
  --text-danger: var(--red-70);
  --text-warning: var(--yellow-60);
  --tooltip-bg: var(--bgray-11);
  --tooltip-text: var(--bgray-1);

  /* Degradado del hero (login) — exacto */
  --hero-gradient: linear-gradient(0deg, #ffffff 26.84%, #d9f1ff 111.16%);

  /* Radios (los que usa el sitio: 8, 12, 16, 24, 30/píldora) */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-pill: 9999px;

  /* Sombras (Tailwind shadow-lg / shadow-xl, usadas en la tarjeta "Recomendado" y el hero) */
  --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.05);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);

  /* Layout */
  --sidebar-w: 248px;
  --sidebar-w-collapsed: 72px;
  --topbar-h: 64px; /* Yimi usa header 76px en marketing */
  --content-max: 1200px; /* el sitio centra a 1200px */
}