/* ============================================================
   Friends & Family — Tokens de diseño (portados 1:1 desde el
   sistema de diseño de la marca) + Montserrat auto-hospedada. Prefijo: --fyf-
   ============================================================ */

/* -------- Montserrat auto-hospedada (el subconjunto latin cubre los acentos de es-CO) -------- */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/montserrat-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/montserrat-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/montserrat-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/montserrat-700.woff2') format('woff2');
}

:root {
  /* Familia + pesos */
  --fyf-font-sans: 'Montserrat', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --fyf-weight-regular: 400;
  --fyf-weight-medium: 500;
  --fyf-weight-semibold: 600;
  --fyf-weight-bold: 700;

  /* -------- Primario (azul de marca) -------- */
  --fyf-primary-dark:  #094EA0;
  --fyf-primary:       #0074CB;
  --fyf-primary-light: #4395D1;

  /* -------- Neutros -------- */
  --fyf-gray-900: #1A1A1A;
  --fyf-gray-700: #4B4B4B;
  --fyf-gray-500: #737373;
  --fyf-gray-300: #D9D9D9;
  --fyf-gray-100: #F5F5F5;
  --fyf-white:    #FFFFFF;

  /* -------- Estado del sistema -------- */
  --fyf-success: #2EAF5D;
  --fyf-warning: #F6A800;
  --fyf-error:   #D93025;
  --fyf-info:    #0074CB;

  /* -------- Estado de negocio -------- */
  --fyf-status-active:   #3F8F5C;
  --fyf-status-pending:  #C88A2D;
  --fyf-status-invited:  #4E7FA8;
  --fyf-status-inactive: #8B95A5;

  /* -------- Alias semánticos -------- */
  --fyf-text-strong:     var(--fyf-gray-900);
  --fyf-text-body:       var(--fyf-gray-700);
  --fyf-text-muted:      var(--fyf-gray-500);
  --fyf-text-on-primary: var(--fyf-white);
  --fyf-text-link:       var(--fyf-primary);

  --fyf-bg:             var(--fyf-gray-100);
  --fyf-surface:        var(--fyf-white);
  --fyf-surface-subtle: var(--fyf-gray-100);

  --fyf-border:        var(--fyf-gray-300);
  --fyf-border-strong: var(--fyf-gray-500);

  --fyf-action:          var(--fyf-primary);
  --fyf-action-hover:    var(--fyf-primary-dark);
  --fyf-action-active:   var(--fyf-primary-dark);
  --fyf-action-disabled: var(--fyf-gray-300);

  --fyf-focus-ring: rgba(0, 116, 203, 0.35);

  /* -------- Escala tipográfica -------- */
  --fyf-h1-size: 32px;   --fyf-h1-line: 40px;
  --fyf-h2-size: 24px;   --fyf-h2-line: 32px;
  --fyf-h3-size: 20px;   --fyf-h3-line: 28px;
  --fyf-body-size: 16px; --fyf-body-line: 24px;
  --fyf-small-size: 14px;--fyf-small-line: 20px;
  --fyf-caption-size: 12px;--fyf-caption-line: 16px;

  --fyf-tracking-tight: -0.01em;
  --fyf-tracking-normal: 0;
  --fyf-tracking-wide: 0.02em;

  /* -------- Espaciado (base-8) -------- */
  --fyf-space-4: 4px;   --fyf-space-8: 8px;   --fyf-space-16: 16px;
  --fyf-space-24: 24px; --fyf-space-32: 32px; --fyf-space-40: 40px;
  --fyf-space-48: 48px; --fyf-space-64: 64px; --fyf-space-80: 80px; --fyf-space-96: 96px;

  /* -------- Radios -------- */
  --fyf-radius-chip: 2px;
  --fyf-radius-sm:   9px;
  --fyf-radius-md:   12px;
  --fyf-radius-lg:   16px;
  --fyf-radius-xl:   20px;
  --fyf-radius-pill: 999px;

  /* -------- Bordes -------- */
  --fyf-border-width: 1px;

  /* -------- Elevación -------- */
  --fyf-shadow-sm: 0 1px 2px rgba(16,24,40,.06), 0 1px 3px rgba(16,24,40,.10);
  --fyf-shadow-md: 0 2px 4px -2px rgba(16,24,40,.06), 0 4px 8px -2px rgba(16,24,40,.10);
  --fyf-shadow-lg: 0 4px 6px -2px rgba(16,24,40,.03), 0 12px 16px -4px rgba(16,24,40,.08);
  --fyf-shadow-focus: 0 0 0 3px var(--fyf-focus-ring);

  /* -------- Maquetación -------- */
  /* El diseño usa una columna de contenido al 90% (ver el helmet de Home: --fyf-content-max:90%). */
  --fyf-content-max: 90%;
  --fyf-page-gutter: var(--fyf-space-24);
}