@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('./fonts/inter-400.woff2') format('woff2');
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('./fonts/inter-500.woff2') format('woff2');
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('./fonts/inter-600.woff2') format('woff2');
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('./fonts/inter-700.woff2') format('woff2');
}

/**
 * MailEx design tokens.
 * Colors sourced from the official logo and mailexpress.com.ar (brand red
 * #DA2426 and near-black #221E1F are pixel-identical across both).
 */
:root {
  /* Brand colors */
  --mx-color-primary: #da2426;
  --mx-color-primary-hover: #b81d1f;
  --mx-color-primary-active: #961718;
  --mx-color-dark: #221e1f;

  /* Neutrals */
  --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;

  /* Feedback */
  --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;

  /* Typography */
  --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;

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

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

  /* Elevation */
  --mx-shadow-sm: 0 1px 2px rgba(34, 30, 31, 0.08);
  --mx-shadow-md: 0 4px 12px rgba(34, 30, 31, 0.12);

  /* Focus ring */
  --mx-focus-ring: 0 0 0 3px rgba(218, 36, 38, 0.25);
}


/* MailEx DS — component styles */

.mx-reset {
  box-sizing: border-box;
  font-family: var(--mx-font-family);
}

/* Button */
.mx-button {
  box-sizing: border-box;
  font-family: var(--mx-font-family);
  font-weight: var(--mx-font-weight-semibold);
  line-height: var(--mx-line-height-tight);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--mx-space-2);
  border-radius: var(--mx-radius-md);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
  white-space: nowrap;
}
.mx-button:focus-visible {
  outline: none;
  box-shadow: var(--mx-focus-ring);
}
.mx-button:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}
.mx-button--sm { font-size: var(--mx-font-size-sm); padding: var(--mx-space-1) var(--mx-space-3); }
.mx-button--md { font-size: var(--mx-font-size-base); padding: var(--mx-space-2) var(--mx-space-4); }
.mx-button--lg { font-size: var(--mx-font-size-lg); padding: var(--mx-space-3) var(--mx-space-5); }

.mx-button--primary { background: var(--mx-color-primary); color: #fff; }
.mx-button--primary:hover:not(:disabled) { background: var(--mx-color-primary-hover); }
.mx-button--primary:active:not(:disabled) { background: var(--mx-color-primary-active); }

.mx-button--secondary { background: var(--mx-color-dark); color: #fff; }
.mx-button--secondary:hover:not(:disabled) { background: #35302f; }

.mx-button--outline { background: transparent; color: var(--mx-color-primary); border-color: var(--mx-color-primary); }
.mx-button--outline:hover:not(:disabled) { background: var(--mx-color-danger-bg); }

.mx-button--ghost { background: transparent; color: var(--mx-color-text); }
.mx-button--ghost:hover:not(:disabled) { background: var(--mx-color-bg-muted); }

.mx-button--danger { background: var(--mx-color-danger); color: #fff; }
.mx-button--danger:hover:not(:disabled) { background: var(--mx-color-primary-hover); }

/* Field wrapper shared by Input / Select */
.mx-field {
  display: flex;
  flex-direction: column;
  gap: var(--mx-space-1);
  font-family: var(--mx-font-family);
  width: 100%;
}
.mx-field__label {
  font-size: var(--mx-font-size-sm);
  font-weight: var(--mx-font-weight-medium);
  color: var(--mx-color-text);
}
.mx-field__hint {
  font-size: var(--mx-font-size-xs);
  color: var(--mx-color-text-muted);
}
.mx-field__error {
  font-size: var(--mx-font-size-xs);
  color: var(--mx-color-danger);
}

.mx-input,
.mx-select {
  box-sizing: border-box;
  font-family: var(--mx-font-family);
  font-size: var(--mx-font-size-base);
  color: var(--mx-color-text);
  background: var(--mx-color-bg);
  border: 1px solid var(--mx-color-border);
  border-radius: var(--mx-radius-md);
  padding: var(--mx-space-2) var(--mx-space-3);
  width: 100%;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}
.mx-input::placeholder { color: var(--mx-color-text-subtle); }
.mx-input:focus,
.mx-select:focus {
  outline: none;
  border-color: var(--mx-color-primary);
  box-shadow: var(--mx-focus-ring);
}
.mx-input:disabled,
.mx-select:disabled {
  background: var(--mx-color-bg-muted);
  color: var(--mx-color-text-subtle);
  cursor: not-allowed;
}
.mx-input--error,
.mx-select--error {
  border-color: var(--mx-color-danger);
}

/* Checkbox */
.mx-checkbox {
  display: inline-flex;
  align-items: center;
  gap: var(--mx-space-2);
  font-family: var(--mx-font-family);
  font-size: var(--mx-font-size-base);
  color: var(--mx-color-text);
  cursor: pointer;
}
.mx-checkbox__input {
  width: 18px;
  height: 18px;
  accent-color: var(--mx-color-primary);
  cursor: pointer;
}
.mx-checkbox--disabled { color: var(--mx-color-text-subtle); cursor: not-allowed; }
.mx-checkbox--disabled .mx-checkbox__input { cursor: not-allowed; }

/* Badge */
.mx-badge {
  display: inline-flex;
  align-items: center;
  font-family: var(--mx-font-family);
  font-size: var(--mx-font-size-xs);
  font-weight: var(--mx-font-weight-semibold);
  line-height: 1;
  padding: var(--mx-space-1) var(--mx-space-2);
  border-radius: var(--mx-radius-pill);
  white-space: nowrap;
}
.mx-badge--neutral { background: var(--mx-color-bg-muted); color: var(--mx-color-text); }
.mx-badge--primary { background: var(--mx-color-dark); color: #fff; }
.mx-badge--success { background: var(--mx-color-success-bg); color: var(--mx-color-success); }
.mx-badge--warning { background: var(--mx-color-warning-bg); color: var(--mx-color-warning); }
.mx-badge--danger { background: var(--mx-color-danger-bg); color: var(--mx-color-danger); }
.mx-badge--info { background: var(--mx-color-info-bg); color: var(--mx-color-info); }

/* Card */
.mx-card {
  box-sizing: border-box;
  font-family: var(--mx-font-family);
  background: var(--mx-color-bg);
  border: 1px solid var(--mx-color-border);
  border-radius: var(--mx-radius-lg);
  box-shadow: var(--mx-shadow-sm);
  overflow: hidden;
}
.mx-card__header {
  padding: var(--mx-space-4) var(--mx-space-5);
  border-bottom: 1px solid var(--mx-color-border);
}
.mx-card__title {
  font-size: var(--mx-font-size-lg);
  font-weight: var(--mx-font-weight-semibold);
  color: var(--mx-color-text);
  margin: 0;
}
.mx-card__body {
  padding: var(--mx-space-5);
  font-size: var(--mx-font-size-base);
  color: var(--mx-color-text);
}
.mx-card__footer {
  padding: var(--mx-space-4) var(--mx-space-5);
  border-top: 1px solid var(--mx-color-border);
  background: var(--mx-color-bg-subtle);
  display: flex;
  gap: var(--mx-space-2);
  justify-content: flex-end;
}

/* Alert */
.mx-alert {
  display: flex;
  gap: var(--mx-space-3);
  align-items: flex-start;
  font-family: var(--mx-font-family);
  padding: var(--mx-space-4);
  border-radius: var(--mx-radius-md);
  border: 1px solid transparent;
}
.mx-alert__title {
  font-weight: var(--mx-font-weight-semibold);
  font-size: var(--mx-font-size-sm);
  margin: 0 0 var(--mx-space-1);
}
.mx-alert__body {
  font-size: var(--mx-font-size-sm);
  margin: 0;
}
.mx-alert--info { background: var(--mx-color-info-bg); color: var(--mx-color-info); border-color: var(--mx-color-info-bg); }
.mx-alert--success { background: var(--mx-color-success-bg); color: var(--mx-color-success); border-color: var(--mx-color-success-bg); }
.mx-alert--warning { background: var(--mx-color-warning-bg); color: var(--mx-color-warning); border-color: var(--mx-color-warning-bg); }
.mx-alert--danger { background: var(--mx-color-danger-bg); color: var(--mx-color-danger); border-color: var(--mx-color-danger-bg); }

/* Typography */
.mx-heading {
  font-family: var(--mx-font-family);
  color: var(--mx-color-text);
  font-weight: var(--mx-font-weight-bold);
  line-height: var(--mx-line-height-tight);
  margin: 0;
}
.mx-heading--1 { font-size: var(--mx-font-size-3xl); }
.mx-heading--2 { font-size: var(--mx-font-size-2xl); }
.mx-heading--3 { font-size: var(--mx-font-size-xl); }
.mx-heading--4 { font-size: var(--mx-font-size-lg); }

.mx-text {
  font-family: var(--mx-font-family);
  line-height: var(--mx-line-height-base);
  margin: 0;
  color: var(--mx-color-text);
}
.mx-text--body { font-size: var(--mx-font-size-base); }
.mx-text--small { font-size: var(--mx-font-size-sm); }
.mx-text--muted { color: var(--mx-color-text-muted); }