/* ===========================================================================
   INS Suite — tokens de la interfaz
   ---------------------------------------------------------------------------
   Portados del design system oficial de Grupo INS, derivado del Manual de
   Identidad Corporativa. Fuente única para toda la suite.

   QUÉ VISTE ESTE ARCHIVO Y QUÉ NO
   -------------------------------
   Estos tokens visten la APLICACIÓN: el portal, la administración y los
   paneles de edición de cada módulo. Son producto digital de Grupo INS.

   Las PIEZAS que los módulos generan (circulares, tarjetas, firmas) llevan su
   propia paleta declarada dentro de cada plantilla, porque pertenecen a la
   campaña Somos Socios del canal de intermediarios, no a la marca madre. Por
   eso cambiar este archivo no altera ni una de las piezas exportadas.
   =========================================================================== */

/* ---------------------------------------------------------------------------
   Montserrat, la tipografía corporativa oficial. El manual prohíbe
   sustituirla.

   El design system la carga desde Google Fonts; acá va self-hosted, y es una
   desviación deliberada: la exportación a JPG rasteriza con html-to-image
   leyendo las fuentes ya cargadas, y una webfont traída de un CDN externo sale
   en fallback o falla por CORS al exportar. Además la intranet del INS puede
   bloquear el CDN. Misma familia, mismo peso variable; sólo cambia el origen.
   --------------------------------------------------------------------------- */
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("./fonts/Montserrat.woff2") format("woff2");
}
@font-face {
  font-family: "Montserrat";
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url("./fonts/Montserrat-Italic.woff2") format("woff2");
}

:root {
  /* =========================================================================
     COLOR — paleta oficial
     Principal:    Verde Jade INS #0B4E4E
     Secundarios:  Verde Mistra #1EAE8C · Anaranjado #ED6F27 · Amarillo #FECF18
     Los secundarios son acentos: su uso debe ser puntual y justificado, y
     nunca reemplazar al principal.
     ========================================================================= */

  /* ---- Jade (principal) ---- */
  --ins-jade-950: #042c2c;
  --ins-jade-900: #073a3a;
  --ins-jade-800: #0b4e4e; /* PRIMARIO oficial */
  --ins-jade-700: #0f5f5d;
  --ins-jade-600: #167873;
  --ins-jade-400: #5aa8a3;
  --ins-jade-200: #b6d7d3;
  --ins-jade-50: #e8f2f0;

  /* ---- Secundarios ---- */
  --ins-green-600: #178e72;
  --ins-green-500: #1eae8c; /* Verde Mistra */
  --ins-green-400: #46c6a6;
  --ins-green-100: #dcf3ec;
  --ins-yellow: #fecf18;
  --ins-amber: #f7a52b;
  --ins-orange: #ed6f27;

  /* ---- Neutros ---- */
  --ins-white: #ffffff;
  --ins-paper: #f5f7f7;
  --ins-mist: #e9edec;
  --ins-gray-300: #cbd4d2;
  --ins-gray-500: #8a9794;
  --ins-gray-700: #46524f;
  --ins-ink: #102b2a;

  /* ---- Semánticos ---- */
  --ins-success: #1eae8c;
  --ins-success-bg: #dcf3ec;
  --ins-warning: #e08a1e;
  --ins-warning-bg: #fdefd6;
  --ins-error: #d64545; /* añadido por el sistema: la paleta oficial no tiene rojo */
  --ins-error-bg: #fbe3e3;

  /* Texto de los mensajes. Va como token y no fijo en cada hoja porque un
     granate sobre fondo claro es ilegible en cuanto el fondo se oscurece. */
  --text-success: #0c5b48;
  --text-warning: #8a5a12;
  --text-error: #8f2f2f;

  /* =========================================================================
     ALIAS SEMÁNTICOS — usar estos en los componentes, no los primitivos
     ========================================================================= */
  --color-brand: var(--ins-jade-800);
  --color-brand-strong: var(--ins-jade-900);
  --color-brand-soft: var(--ins-jade-50);
  /* Lo que se dibuja ENCIMA de --color-brand-soft. En oscuro ese lavado es
     jade traslúcido, así que un icono jade quedaría invisible sobre él. */
  --color-on-brand-soft: var(--ins-jade-800);
  --color-accent: var(--ins-green-500);
  --color-accent-warm: var(--ins-orange);
  /* El asterisco de campo obligatorio.
     No puede ser el naranja oficial: sobre la tarjeta blanca da 3.0:1, y esto
     es TEXTO —pide 4.5:1—, no un gráfico. Y no es decorativo aunque lleve
     aria-hidden: el asterisco es lo único que le avisa a una persona vidente
     que el campo es obligatorio, así que quien lo necesita es justamente quien
     ve poco. Tono cálido oscurecido: 5.91:1 sobre la tarjeta, 5.01 sobre el
     hundido. */
  --marca-requerido: #8a5a12;

  --text-primary: var(--ins-ink);
  --text-secondary: var(--ins-gray-700);
  /* El Gris 60% oficial (--ins-gray-500, #8A9794) da 2.82:1 sobre el papel de
     la página: no llega al 4.5:1 que WCAG AA pide para texto pequeño, y este
     token se usa justo en lo más chico (metadatos, descargos). Se oscurece
     dentro de la misma familia. El primitivo no se toca: sigue sirviendo para
     bordes y para texto grande.
     El valor se calcula contra el fondo MÁS OSCURO de los claros, que es el
     hundido (--ins-mist): #63716E daba 5.10:1 sobre la tarjeta y 4.91 sobre el
     papel, pero 4.32 sobre el hundido, y las cajas del panel de edición son
     hundidas. Ahora: 5.49 / 5.05 / 4.65. */
  --text-muted: #5e6c69;
  --text-on-brand: var(--ins-white);
  --text-on-brand-soft: rgba(255, 255, 255, 0.72);
  /* 0.52 daba 3.80:1 sobre el jade de las cabeceras. */
  --text-on-brand-muted: rgba(255, 255, 255, 0.62);

  --surface-page: var(--ins-paper);
  --surface-card: var(--ins-white);
  --surface-sunken: var(--ins-mist);
  --surface-brand: var(--ins-jade-800);
  --surface-brand-deep: var(--ins-jade-950);
  --surface-card-on-brand: var(--ins-jade-700);

  --border-subtle: var(--ins-mist);
  --border-default: var(--ins-gray-300);
  --border-strong: var(--ins-jade-400);
  --border-on-brand: rgba(255, 255, 255, 0.16);

  /* ---- Acción principal ----
     Separado de --color-brand a propósito: en claro el botón es jade sobre
     blanco, pero en oscuro el fondo YA es jade y un botón jade desaparecería.
     Ahí se invierte a blanco sobre jade, que mantiene al jade de protagonista
     sin ascender un color secundario a primario. */
  --action-fill: var(--ins-jade-800);
  --action-fill-hover: var(--ins-jade-900);
  --action-text: var(--ins-white);
  --action-shadow: var(--shadow-brand);

  /* El logo sobre la superficie de página. Sobre marca se usa la versión
     blanca tal cual; acá hace falta un color que siga al tema, porque el jade
     oficial sobre una página oscura —que también es jade— desaparece. */
  --logo-color: var(--ins-jade-800);

  /* =========================================================================
     TIPOGRAFÍA
     ========================================================================= */
  --font-display: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-extra: 800;

  --text-2xs: 0.6875rem; /* 11 */
  --text-xs: 0.75rem;    /* 12 */
  --text-sm: 0.875rem;   /* 14 */
  --text-base: 1rem;     /* 16 */
  --text-md: 1.125rem;   /* 18 */
  --text-lg: 1.375rem;   /* 22 */
  --text-xl: 1.75rem;    /* 28 */
  --text-2xl: 2.25rem;   /* 36 */
  --text-3xl: 2.9375rem; /* 47 */

  --leading-tight: 1.1;
  --leading-snug: 1.25;
  --leading-normal: 1.5;
  --leading-relaxed: 1.65;

  --tracking-tight: -0.02em;
  --tracking-wide: 0.04em;
  --tracking-caps: 0.08em;

  /* =========================================================================
     ESPACIADO, RADIOS, ELEVACIÓN Y MOVIMIENTO
     ========================================================================= */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 2.5rem;
  --space-8: 3rem;
  --space-9: 4rem;

  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px; /* radio de card por defecto */
  --radius-xl: 24px;
  --radius-pill: 999px; /* botones y chips: siempre pill completo */

  --border-width: 1px;
  --border-width-strong: 2px;

  /* Las sombras van teñidas de jade, nunca negro neutro. */
  --shadow-xs: 0 1px 2px rgba(0, 44, 44, 0.06);
  --shadow-sm: 0 2px 6px rgba(0, 44, 44, 0.08);
  --shadow-md: 0 6px 18px rgba(0, 44, 44, 0.1);
  --shadow-lg: 0 14px 36px rgba(0, 44, 44, 0.14);
  --shadow-brand: 0 12px 28px rgba(11, 78, 78, 0.28);
  /* El foco SIEMPRE es este anillo verde, nunca el outline del navegador. */
  --shadow-focus: 0 0 0 3px rgba(30, 174, 140, 0.45);

  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 140ms;
  --dur-base: 220ms;
  --dur-slow: 360ms;

  /* Motivo de marca: anillos concéntricos sobre paneles jade oscuros. */
  --motif-rings: repeating-radial-gradient(
    circle at var(--motif-x, 100%) var(--motif-y, 50%),
    transparent 0,
    transparent 26px,
    rgba(30, 174, 140, 0.16) 27px,
    rgba(30, 174, 140, 0.16) 29px
  );
}

/* ===========================================================================
   VARIANTE OSCURA
   ---------------------------------------------------------------------------
   El design system oficial no la define, así que se deriva de su propia
   escala: la marca ya vive en jade profundo, de modo que el modo oscuro no
   inventa colores nuevos sino que sube el jade a superficie y baja el papel a
   texto. Sólo se redefinen los alias semánticos; los primitivos no cambian.

   Tres estados, no dos: quien no eligió nada sigue a su sistema operativo
   (@media), y quien eligió gana sobre el sistema en ambos sentidos
   ([data-tema]). Por eso la media query se acota con :not([data-tema="claro"]):
   sin eso, elegir claro con el sistema en oscuro no tendría efecto.
   =========================================================================== */

@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    --text-primary: var(--ins-paper);
    --text-secondary: rgba(245, 247, 247, 0.72);
    --text-muted: rgba(245, 247, 247, 0.6); /* 0.5 daba 4.10:1 sobre las cards;
       0.56 daba 4.28 sobre el lavado ámbar del bloque de IA */
    --text-on-brand: var(--ins-paper);
    --text-on-brand-soft: rgba(245, 247, 247, 0.72);
    --text-on-brand-muted: rgba(245, 247, 247, 0.66); /* 0.62 se quedaba en 4.45:1 */

    --surface-page: var(--ins-jade-950);
    --surface-card: var(--ins-jade-900);
    --surface-sunken: #052020;
    --surface-brand: var(--ins-jade-900);
    --surface-brand-deep: #021c1c;
    --surface-card-on-brand: var(--ins-jade-800);

    --color-brand-soft: rgba(30, 174, 140, 0.14);
    --color-on-brand-soft: var(--ins-green-400);

    --border-subtle: rgba(245, 247, 247, 0.1);
    --border-default: rgba(245, 247, 247, 0.18);
    --border-strong: var(--ins-jade-400);
    --border-on-brand: rgba(245, 247, 247, 0.16);

    --action-fill: var(--ins-paper);
    --action-fill-hover: var(--ins-white);
    --action-text: var(--ins-jade-900);
    --action-shadow: 0 10px 24px rgba(0, 0, 0, 0.35);
  --logo-color: var(--ins-paper);
    --logo-color: var(--ins-paper);

    /* Sobre fondo oscuro, una sombra teñida de jade no se ve: la profundidad
       la dan el negro y los bordes claros. */
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.32);
    --shadow-md: 0 6px 18px rgba(0, 0, 0, 0.38);
    --shadow-lg: 0 14px 36px rgba(0, 0, 0, 0.45);
    --shadow-brand: 0 10px 24px rgba(0, 0, 0, 0.35);

    --ins-success-bg: rgba(30, 174, 140, 0.16);
    --ins-warning-bg: rgba(224, 138, 30, 0.16);
    --ins-error-bg: rgba(214, 69, 69, 0.16);
    --text-success: #6fdcc0;
    --text-warning: #f0b45c;
    /* 6.81:1 sobre la tarjeta oscura. */
    --marca-requerido: #f0b45c;
    --text-error: #f2a1a1;
  }
}

:root[data-tema="oscuro"] {
  --text-primary: var(--ins-paper);
  --text-secondary: rgba(245, 247, 247, 0.72);
  --text-muted: rgba(245, 247, 247, 0.6); /* 0.5 daba 4.10:1 sobre las cards;
       0.56 daba 4.28 sobre el lavado ámbar del bloque de IA */
  --text-on-brand: var(--ins-paper);
  --text-on-brand-soft: rgba(245, 247, 247, 0.72);
  --text-on-brand-muted: rgba(245, 247, 247, 0.66); /* 0.62 se quedaba en 4.45:1 */

  --surface-page: var(--ins-jade-950);
  --surface-card: var(--ins-jade-900);
  --surface-sunken: #052020;
  --surface-brand: var(--ins-jade-900);
  --surface-brand-deep: #021c1c;
  --surface-card-on-brand: var(--ins-jade-800);

  --color-brand-soft: rgba(30, 174, 140, 0.14);
  --color-on-brand-soft: var(--ins-green-400);

  --border-subtle: rgba(245, 247, 247, 0.1);
  --border-default: rgba(245, 247, 247, 0.18);
  --border-strong: var(--ins-jade-400);
  --border-on-brand: rgba(245, 247, 247, 0.16);

  --action-fill: var(--ins-paper);
  --action-fill-hover: var(--ins-white);
  --action-text: var(--ins-jade-900);
  --action-shadow: 0 10px 24px rgba(0, 0, 0, 0.35);
  --logo-color: var(--ins-paper);

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.32);
  --shadow-md: 0 6px 18px rgba(0, 0, 0, 0.38);
  --shadow-lg: 0 14px 36px rgba(0, 0, 0, 0.45);
  --shadow-brand: 0 10px 24px rgba(0, 0, 0, 0.35);

  --ins-success-bg: rgba(30, 174, 140, 0.16);
  --ins-warning-bg: rgba(224, 138, 30, 0.16);
  --ins-error-bg: rgba(214, 69, 69, 0.16);
  --text-success: #6fdcc0;
  --text-warning: #f0b45c;
  /* 6.81:1 sobre la tarjeta oscura. */
  --marca-requerido: #f0b45c;
  --text-error: #f2a1a1;
}