/* Tokens del MailEx Design System (@mailex/ds@0.1.0) — valores tal cual el
   paquete oficial, extraídos de su Claude Design canvas el 2026-09-07.
   No modificar a mano: si la empresa actualiza el DS, volver a sincronizar. */
:root {
  --mx-color-primary: #da2426;
  --mx-color-primary-hover: #b81d1f;
  --mx-color-primary-active: #961718;
  --mx-color-dark: #221e1f;
  --mx-color-text: #221e1f;
  --mx-color-text-muted: #5a5a5a;
  --mx-color-text-subtle: #707070;
  --mx-color-bg: #ffffff;
  --mx-color-bg-subtle: #f8f8f8;
  --mx-color-bg-muted: #f3f3f3;
  --mx-color-border: #ced4da;
  --mx-color-border-strong: #adb5bd;
  --mx-color-success: #1e7e34;
  --mx-color-success-bg: #e6f4ea;
  --mx-color-warning: #b8860b;
  --mx-color-warning-bg: #fff3cd;
  --mx-color-danger: #da2426;
  --mx-color-danger-bg: #fbe7e7;
  --mx-color-info: #2c7be5;
  --mx-color-info-bg: #e8f1fd;

  --mx-font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --mx-font-size-xs: 0.75rem;
  --mx-font-size-sm: 0.875rem;
  --mx-font-size-base: 1rem;
  --mx-font-size-lg: 1.125rem;
  --mx-font-size-xl: 1.375rem;
  --mx-font-size-2xl: 1.75rem;
  --mx-font-size-3xl: 2.25rem;
  --mx-font-weight-regular: 400;
  --mx-font-weight-medium: 500;
  --mx-font-weight-semibold: 600;
  --mx-font-weight-bold: 700;
  --mx-line-height-tight: 1.2;
  --mx-line-height-base: 1.5;

  --mx-space-1: 4px;
  --mx-space-2: 8px;
  --mx-space-3: 12px;
  --mx-space-4: 16px;
  --mx-space-5: 24px;
  --mx-space-6: 32px;

  --mx-radius-sm: 4px;
  --mx-radius-md: 6px;
  --mx-radius-lg: 10px;
  --mx-radius-pill: 999px;

  --mx-shadow-sm: 0 1px 2px rgba(34, 30, 31, 0.08);
  --mx-shadow-md: 0 4px 12px rgba(34, 30, 31, 0.12);
  --mx-focus-ring: 0 0 0 3px rgba(218, 36, 38, 0.25);

  /* No forman parte de los 47 tokens del DS — son propios del WMS para el
     layout de shell (sidebar/topbar), que el DS no cubre. */
  --mx-sidebar-width: 220px;
  --mx-topbar-height: 56px;

  /* Tampoco son del DS: timings de animación/transición propios del WMS
     para el "layout glue" (el DS solo define transiciones puntuales de
     hover/focus dentro de sus propios componentes). */
  --mx-motion-fast: 120ms ease;
  --mx-motion-base: 200ms ease;
  --mx-motion-entrance: 320ms cubic-bezier(0.16, 1, 0.3, 1);
}

@font-face {
  font-family: "Inter";
  src: url("/static/fonts/inter/Inter-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("/static/fonts/inter/Inter-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("/static/fonts/inter/Inter-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("/static/fonts/inter/Inter-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}